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

More than 1 year has passed since last update.


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キャピ