css拡張メタ言語でできることを、sass(scss),less,stylusの3つを比較して見てみます。
基本的な構文
LESS、 Scss
プロパティのネストはほとんどCSSのままです。
両方とも文末にセミコロンを書き忘れるとコンパイルエラーになってしまいます。
/* LESS Scss */ section { position: relative; ul { padding: 10px; li { margin-top: 25px; &:first-child { margin-top: 0; } } } }
Stylus
StylusではCSSの{}を省略してインデントで記述できます。
また文末のセミコロン、プロパティと値の間のコロンも省略可能です。
/* Stylus */ section position: relative ul margin: 10px li margin-top: 25px &:first-child margin-top: 0
変数
LESS
先頭に@をつけて定義します
/* LESS */ @fontColor: #3b3e42; @mainWidth: 1024px; body { color: @fontColor; width: @mainWidth; }
Scss
先頭に$をつけて定義します
/* Scss */ $fontColor: #3b3e42; $mainWidth: 1024px; body { color: $fontColor; width: $mainWidth; }
Stylus
変数の定義時に何か付ける必要はありません。(@は別の機能で使われているので使用できません)
LESS、Scssと違い 変数名=値 という形で書きます。
/* Stylus */ fontColor = #3b3e42 $mainWidth = 1024px body color: fontColor width: $mainWidth
Mixin
LESS
.Mixin名で定義します。
同名のクラス名が存在しても問題も問題なくコンパイルできますが、同名のクラスが引数を取らないMixinとして実行されて同じスタイル内に入ってしまうので注意が必要です。
/* LESS */ .messageLabel( @bgColor:#da0000 ) { color: #FFF; background-color: @bgColor; padding: 3px 5px; } // Mixin名と被っているClass .messageLabel { color: #F00; } .label { &.error { .messageLabel(); } &.success { .messageLabel(#25af4a); } }
Scss
@mixin Mixin名 で定義、Mixinを使う時は@include Mixin名のようにします。
/* Scss */ @mixin messageLabel( $bgColor:#da0000 ) { color: #FFF; background-color: $bgColor; padding: 3px 5px; } .label { &.error { @include messageLabel(); } &.success { @include messageLabel(#25af4a); } }
Stylus
Mixinを定義するのに特に先頭に何かを付ける必要がありません。
/* STylus */ messageLabel( bgColor=#da0000 ) color: #FFF background-color: bgColor padding: 3px 5px .label &.error messageLabel() &.success messageLabel(#25af4a)
継承 (extend)
LESS
&:extend(継承元のクラス名); で記述します。
/* LESS */ .block { display: block; margin: 1em .5em; padding: 5px; } p { &:extend(.block); border-top: 1px dashed #EEE; } ul, ol, dl { &:extend(.block); list-style: none; }
Scss
@extend 継承元のクラス名 で記述します。
/* Scss */ .block { display: block; margin: 1em .5em; padding: 5px; } p { @extend .block; border-top: 1px dashed #EEE; } ul, ol, dl { @extend .block; list-style: none; }
Stylus
Scssと同様で @extend 継承元のクラス名 で記述します。
Stylusではネストされたセレクタでも継承をさせることができます。
/* Stylus */ .block display: block margin: 1em .5em padding: 5px // stylusはネストされた要素の継承も可能 .block2 display: block margin: 0 padding: 5px section margin-top: 1em &:first-child margin-top: 0 p @extend .block border-top: 1px dashed #EEE ul, ol, dl @extend .block list-style: none .section @extend .block2 section color: #ddd
ファイルのインポート
ファイルのincludeは、LESS、Scss、Stylus共に同じです。
.cssのCSSファイルの場合はimport文が出力されます。
LESS、Scss、Stylusそれぞれのファイルをインポートすると、内容が展開され1つのCSSファイルになります。
/* LESS Scss Stylus */ @import ”reset.css”; @import ”file.{fileType}”;
計算
LESS、Scss、Stylus共に値の数字を計算させることが出来ます。
/* LESS Scss Stylus */ #main { width: 1024- (30 * 2); margin: 0 (30px / 2); padding: 0 (30px - 15); }
LESS, Sass/Scss, Stylusで実現できることはそれほど変わりませんが、それぞれにメリット / デメリットがあり使い易さも違うので、自分のスタイルに合わせて選択すれば良いと思います。
※LESSはクライアントサイドでの変換も可能という特徴があります(JavaScriptが動作しない環境ではこの方法は利用できない & 動的な変換になるためパフォーマンスに影響があります)