使い方によっては、素のCSSよりも分かりにくくなります。
ネガティブな内容かもしれませんが、ざっとSass（SCSS）をまとめてみます。
Sass（SCSS）とは
Sassとは、Syntactically Awesome Style Sheetsの略です。
CSSを便利に書くために作られた言語で、似たものでは、LessやStylusというものがあります。
実際にブラウザで認識させるには、CSSに変換する必要があります。
Sass: Syntactically Awesome Style Sheets
二つの書き方
Sassには、二つの書き方があります。
- インデントでネストを管理し、｛｝や；が必要がない書き方。
拡張子は｢.sass｣ - CSSと同じように記述し、Sassの機能を使うことができる書き方。
拡張子は｢.scss｣
CSSと共存できるSCSSの書き方が、主流です。
Sassの環境
コマンドラインやアプリケーションから使うことができます。
Rubyをインストールし、テキストエディタから扱うことが一般的だと思います。
おもな機能
変数、ネスト、ミックスイン、セレクタの継承などがあります。
変数
変数を使うことができます。
演算なども行えます。
SCSS
$maxsize: 960px;
.main{
width: $maxsize + 30px;
}
CSS
.main {
width: 990px;
}
ネスト（入れ子）
ネスト（入れ子）にすることで、何度も同じid/classを書かなくても、関連したスタイルをまとめることができます。
SCSS
.nav{
width: 600px;
.child{
width: 100px;
a{
color: #ff0;
&:hover{
color: #fff;
}
}
}
}
CSS
.nav {
width: 600px;
}
.nav .child {
width: 100px;
}
.nav .child a {
color: #ff0;
}
.nav .child a:hover {
color: #fff;
}
ミックスイン（mixin）
スタイルを定義し、呼び出すことができます。
SCSS
@mixin border($bdwidth:1px, $color:#666, $radius:4px) {
border: $bdwidth solid $color;
border-radius: $radius;
}
.item{
width: 400px;
@include border(1px, #999, 5px);
}
CSS
.item {
width: 400px;
border: 1px solid #999;
border-radius: 5px;
}
セレクタの継承（extend）
共通のスタイルをまとめてくれます。
SCSS
%clearfix {
&:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
}
.block{
@extend %clearfix;
color: #000;
}
.section{
@extend %clearfix;
color: #ff0;
}
CSS
.block:after, .section:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.block {
color: #000;
}
.section {
color: #ff0;
}
そのほか
importやコメントは、CSSのものよりも便利になっています。
また、複数の関数が用意されており、自作することもできます。
意外と便利ではない理由
私が感じたことは、以下の五つです。
Sassの混沌化
CSSをきちんと書けない人が、Sassを利用すると混沌としやすいです。
簡単な変数やネストでも、複雑にさせることができます。
BEMやSMACSSのスキル
CSSにBEMやSMACSSといった書き方があります。
日頃から意識していると、Sassを利用しなくても、見やすいCSSが書けます。
ご利用は計画的に
Sassには、多数の機能がありますが、計画的に利用しないと、あとで大変なことになってしまします。
誰でも、視認性の低いソースを触るのは、精神的につらいです。
CSSはプログラムではない
全てでないですが、Sassを使えば、プログラムのように書けます。
しかし、CSSを書く人間の全てが、プログラムを読めるわけではありません。
さらに、今のところSassのプログラム的な記述は、視認性が低いと感じます。
エディタの力
少し前の記事では、Sassならベンダープレフィックスを気にしなくても大丈夫、とあります。
しかし、ベンダープレフィックスだけならSublime Text、Brackets、Atom Editorでは、Autoprefixerなどを使う方が良いです。
他にも、エディタでフォローできる機能がいくつもあります。
Sassとのつきあい
ざっくりと書きましたが、今のところ、Gulpなどタスクランナーで使うのが、ベターな気がします。
無理に多くの機能を使わず、自分にあったものだけを使いましょう。
あとは、プロジェクトチームがSassを採用した場合に、ついていけるだけの少しの知識さえあれば、良いでしょう。
では！
翔泳社
売り上げランキング: 273,836
コメント