SassからScssの変換が上手くいきません。

Question

Star animation CSS

上記作例のアニメーションを、現在私が制作しているReactのプロジェクトの背景に使用したいと思い、Scssに書き換えたのですがアニメーションが動きません。
エラーメッセージはありません。
上記作例のアニメーションを背景に適用する方法をご教示いただけないでしょうか。

作例のコード

#stars
#stars2
#stars3

@import compass

@function multiple-box-shadow ($n) 
  $value: '#{random(2000)}px #{random(20000)}px #FFF'
  @for $i from 2 through $n
    $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF'

  @return unquote($value)

$shadows-small:  multiple-box-shadow(700)
$shadows-medium: multiple-box-shadow(200)
$shadows-big:    multiple-box-shadow(100)

html
  height: 100%
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%)
  overflow: hidden
    
#stars
  width: 1px
  height: 1px
  background: transparent
  box-shadow: $shadows-small
  animation			: animStar 50s linear infinite
    
  &:after
    content: " "
    position: absolute
    top: 2000px
    width: 1px
    height: 1px
    background: transparent
    box-shadow: $shadows-small
    
#stars2
  width: 2px
  height: 2px
  background: transparent
  box-shadow: $shadows-medium
  animation			: animStar 100s linear infinite
    
  &:after
    content: " "
    position: absolute
    top: 2000px
    width: 2px
    height: 2px
    background: transparent
    box-shadow: $shadows-medium
    
#stars3
  width: 3px
  height: 3px
  background: transparent
  box-shadow: $shadows-big
  animation			: animStar 150s linear infinite
    
  &:after
    content: " "
    position: absolute
    top: 2000px
    width: 3px
    height: 3px
    background: transparent
    box-shadow: $shadows-big
    
@keyframes animStar
  from	
    transform: translateY(0px)
  to		
    transform: translateY(-2000px)
    

Sassの書き換え

SassからScssへ書き換えるツールが見つけられなかったので、手作業で下記のように書き換えました。
また、ひとまず動作をテストするためにDOM要素を一つにしています。
そのほかできるだけ行数を減らすために、CodePen上での動作に影響を与えなかったものは削除したり書き換えています。

<div id="stars" />

@function multiple-box-shadow ($n) {
  $value: '#{random(2000)}px #{random(20000)}px #FFF';
    @for $i from 2 through $n {
    $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF';
      }
  @return unquote($value);
}
    
html {
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
  overflow: hidden;
}

#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: multiple-box-shadow(700);
  animation: animStar 50s linear infinite;
    
  &:after {
    content: "";
    position: absolute;
    top: 2000px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: multiple-box-shadow(700);
  }
}  
  
@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {		
    transform: translateY(-2000px)
  }
}

上記書き換え後コードはCodePen上では機能しますが、自分のプロジェクトに引っ張ってくるとアニメーションが起こりません。

Comments

[thyda.eiqau]

なぜsassをscssに書き換えるのですか？元のsassをそのままimportするとどうなりますか？

[MajinBoo]

今のところ他の部分はScssでスタイルを書いているためScssで統一するためです。また、ReactでSassを利用するにはプラグインが必要かと存じますが、背景アニメーションのためだけにプラグインをインストールすることはできるだけ避けたいと考えています。Sassファイルそのままimportは試し次第、コメントに書きます。

[thyda.eiqau]

scssはsassの書き方のひとつに過ぎません。scssが動いているのであれば追加プラグインなしでsassも動くはずです。Reactでscssを使おうと思うと、オーソドックスにnode-sassが入っていると思います

[MajinBoo]

node-sassはインストールしていません。ただ、既に別の部分で&:hoverや&:activeなどの記法が有効になっていたので、Scssが書けているものと思っておりました。Emotionというライブラリを使用している点と、CSS-in-JS記法でスタイルを書いています。もしかしたらそれらが関係あるのかもしれません。

[退会済みユーザー]

codepen上でコンパイルされているcssと、reactでコンパイルされているcssとで、差分はありますか？

[MajinBoo]

codepenからexportした.cssを確認したところ、scssで定義していた関数を実行した状態のものが書き出されていました(白い粒一つずつに色とかを指定している状態でした)　Reactではnode-sassをインストールしcodepenのsassをコピペしimportしたところ、SassError: File to import not found or unreadable: compass. on line 1 とエラーが表示され、コンパイルができませんでした。

[退会済みユーザー]

ひとまずreact上のエラーは解決出来そうでしょうか？
正しくファイルパスが書かれてないみたいなエラーな気がしますが

[MajinBoo]

「compass css」でググったらruby用のsassライブラリのようなので、Reactで使えるかどうかはちょっと微妙な感じです。また、codepen上でimport campassを削除しても問題なく動作していました。