CSSメタ言語のSass ScssとLessを比較しました

  • 64
    いいね
  • 4
    コメント

CSSメタ言語は基本的に同じ

LessやSassとかScssとかいっぱいありますが、基本的にはみんな同じです。
とりあえずCSSと似ているScssを使うといいと思います。

GUIのコンパイラを使おう

CSSメタ言語はGUIコンパイラでコンパイルするといいです。compassなどを利用しコマンドラインでコンパイルしようと思いついても、GUIを使った方がずっと楽でいいとおもいます。

GUIコンパイラを2点、PreprosとKoalaをご紹介します。

Koalaは.mapというファイルが生成されるらしく、Preprosがオススメです。

Sass/Scss と Less の比較

Sass/ScssとLessを比較です。一番違うのは構築の環境です。

Sass/Scss Less
ドキュメント http://sass-lang.com/documentation/file.SASS_REFERENCE.html http://less-ja.studiomohawk.com/
インストールとコンパイル rubyのgemをインストール node.jsパッケージを使うと簡単

変数

変数の比較です。

Sass Scss Less
変数 $hoge $hoge @hoge
代入 $hoge : 10px $hoge : 10px; @hoge : 10px;

SassとScssの変数は$から始まります。

Sassの変数
$red : #FF0000
.hoge
  background-color : $red
Scssの変数
$red : #FF0000;
.hoge {
  color: $red;
}

Lessの変数は@から始まります。

Lessの変数
@red : #FF0000;
.hoge {
  background-color : @red;
}

Lessの変数は@で始まるので、CSSの@mediaなどの記法と被る可能性があり注意が必要です。

おまけ

BootstrapはBootstrap4からScssになるらしく、Bootstrap5ではPostCSSになるぽいので参考にしてくださいね☆(ゝω・)vキャピ