これからStylusを始めるひとへSASSやLESSとの違いをまとめてみた

  • 2015年8月26日
これからStylusを始めるひとへSASSやLESSとの違いをまとめてみた

ここでは、StylusとSASSとLESSの異なるCSSプリプロセッサの違いや機能・利点などをご紹介したいと思います。

Stylusってなに?

Stylus(スタイラス)とは、SASSやLESSの影響を受けたCSSプリプロセッサです。
SASSやLESSにもあるような変数、ネスティング、Mixin、演算子及び関数にも対応したもの。

SASSやLESSとどう違うの?

Stylusは、SASSとLESSのどちらの構文でも使用することができます。

LESS(style.less)の構文

h1 {
  color:#000;
}

SASS(style.sass)の構文

h1
  color:#000

Stylus(style.styl)の構文

h1 {
  color:#000;
}

h1
  color:#000

h1
  color #000

Stylusの構文はSASSやLESSよりももっと自由度が高く、通常のCSSの構文から、括弧の省略、コロン・セミコロンの省略など自分の好きな構文で記述することができます。その他同じソースで異なる構文を使った場合でもエラーもなくコンパイルすることができます。

変数の定義

SASS

SASSの変数の定義は、変数名の前に「$」を宣言し、CSSのプロパティのようにその中の値を「:」で代入します。使用するといきは定義した「$hogehoge」とプロパティに記述することでしようできます。

$maincolor: #000;

h1
  color: $maincolor

LESS

変数名の前に「@」が記述されます。「$」が「@」に変わったこと以外はSASSと同じです。

@maincolor: #000;
h1 {
  color: $maincolor
}

Stylus

Stylusの変数では、変数名の宣言にSASSと同じ「$」を使用します。しかし、変数の代入には「:」ではなく、「=」を使用します。そして変数を参照する際には、「$」を使用しません。

$maincolor = #000

h1
  color maincolor

ネスティング

CSSでは、同じ親要素でも何度も記述しなくてはいけませんでした。SASSやLASS、Stylusでは同じ親を持つ複数の要素をまとめて記述することができます。

Mixin

関数と演算子