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

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

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

GUIのコンパイラを使おう

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

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

• Prepros
  • https://prepros.io/
• Koala
  • http://blog.sou-lab.com/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ｷｬﾋﾟ

Oh, btw—Bootstrap 4 will be in SCSS. And if you care, v5 will likely be in PostCSS because holy crap that sounds cool.

— Mark Otto (@mdo) 2015, 4月 23