前回：CSS拡張メタ言語について学ぶ~その１~ 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が動作しない環境ではこの方法は利用できない & 動的な変換になるためパフォーマンスに影響があります)