SASS(SCSS)を始めたが、ネットのアニメーションの例がことごとく動かなかった #soleved

背景

LESSはnode.jsで閉じてるのが利点だけど、atom-shell-starterでデフォルトで使えるLESSはバージョンが古かった。

そこで、Railsを業務で使うような世界の住人では今後もなそそうではあるけれどRubyは好きなので、SASSを試すことにした。

ところがだ！

atom-shell-starterにSASSを組み込むことは、あまり積極的に覚えるつもりがないGruntのしかもCoffee化されたモノを扱いに苦しみながら、なんとか、それっぽくlint系の方もいれたのに、

肝心のCSSアニメーションが動かない！

キーフレームの変数が展開されない！!

調べてみると、以下のように記述した。$nameが「spin」と展開されずに
css上も$nameとなっていた。

@mixin keyframes($name) {
  @-webkit-keyframes $name {
    @content;
  }
  @-moz-keyframes $name {
    @content;
  }
  @keyframes $name {
    @content;
  }
}

@include keyframes(spin) {
  0% {
    @include transform(rotate(0deg) scale(0.6));
    background: #bf4040;
  }
  50% {
    @include transform(rotate(180deg) scale(1));
    background: #40bfbf;
  }
  100% {
    @include transform(rotate(360deg) scale(0.6));
    background: #bf4040;
  }
}

困ったときの何とかだより

ということで、

• Sass mixins are not replacing variables - Stack Overflow

展開したい変数を
#{}で囲む必要がある模様。

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

おわりに

ここ数十日で素のCSSでない、方法をあれこれ試し始めた
段階なので、まったくトンチンカンなことやってるかもという
不安があるが、記録として残すことにした。