JetPackを入れています。それで、特に意識をしてはいなかったのですが、SCSSが独自CSSをカスタマイズする画面で使えるようになっていました。
ですので試みに機能をONにしてみた（プリプロセッサをSass(SCSS Syntax)にした）ら、かなり便利だったので、理由など書いておきます。
広告
目次
SCSSでの編集が便利だった理由
変数が便利
まずこれがあげられます。
CSSには変数がありません。例えば色をCSSのコード内であちこちに使いまわし、それからその色を変更しようとすると、テキストエディタの一括置換でも使わない限りは、いちいち書き換えるしかないのです。また、値を直接指定するので、その値の意味については、覚えておくか、メモするか、コメントアウトで記しておくことになります。
ですが、変数として名前を付けられると、変数名に意味など含めることもできますし、変数に代入する値を変えるだけで
mixinでややこしいプレフィックスにも対応できる
CSSはブラウザで対応状態が違うこともあり、新しいものなどはプレフィックスがついていないと適用できなかったりします。
CSSを生で書く場合はいちいちそのプレフィックスも書かねばなりませんが、mixinを使うと、関数のような感じで複数のプロパティを一気に同じ値で出力できますので、便利です。
例えば以下のような感じ。
/* animationプロパティのmixin */
@mixin animation($animations…){
-webkit-animation: $animations;
-khtml-animation: $animations;
-moz-animation: $animations;
-ms-animation: $animations;
-o-animation: $animations;
animation: $animations;
}このように定義しておくと、たとえば、
p{
@include animation(設定したい内容);
}と記述するだけで、
p{
-webkit-animation: 設定したい内容;
-khtml-animation: 設定したい内容;
-moz-animation: 設定したい内容;
-ms-animation: 設定したい内容;
-o-animation: 設定したい内容;
animation: 設定したい内容;
}という感じで出力されます。便利。
もちろん即時反映
たまにプラグインとの兼ね合いで即時反映できなくなったりしますが、基本的には編集時即時反映の便利さです。簡単な記法で即時反映させながらデザインをプレビューするのは、とても楽しいです。
その他コメントなど
SCSSの便利さは他にもいろいろあるとは思いますが、何はともあれ便利なのは助かります。ただ、これのままだとカスタマイズ画面の追加CSSからでないとSCSSは使えないので、外部CSSファイルに分離する場合などは、別途コンパイルしてその結果を外部ファイルにするか、プラグインを使うかしたほうがよさそうです。