SASS(scss)とLESSの違い

2016-09-30 20:09 - m.tanaka

こんにちは。デザイン担当の田中です。
今回、SASS(scss)とLESSの違いついて簡単に紹介をしたいと思います。

SASS・LESSとは

SASSとLESSはcssを生成するための技術です。
コンパイルしてcssを用意するという意味では、差はそんなにありません。
前回紹介しました SASS(scss)の入門 を見ていただくと全体像がわかるかと思います。

SASS(scss)とLESSの記述の違い

■ネスト(入れ子)
SASS(scss)とLESSの差はありません。

SASS(scss)

LESS

css

■変数
変数の定義の仕方が微妙に違います。SASS(scss)なら「$」、LESSなら「@」です。

SASS(scss)

LESS

css

■mixin
これはSASS(scss)とLESSで差があります。引数の定義は変数と同じで「$」「@」の差があります。LESSの方が簡単ですが、私はLESSだとclassと見分けがしづらいのでSASS(scss)のほうが好みです。

SASS(scss)

LESS

css

■インポート
SASS(scss)とLESSの差はありません。

SASS(scss)

LESS

最後に

いかがでしたでしょうか。
SASSがRubyベース、LESSがJavaScriptベースと、裏側に差があり機能で「できること」「できないこと」がありますが、今回ご紹介した内容ではほとんど差がありませんね。
SASSの方が機能が多く、ウェブ上の情報・書籍の量でも一歩リードしているようですが、LESSもcssにより近いという意味で導入をしやすいメリットがあります。
LESSも SASS(scss)の入門 で紹介いたしました「Prepros」でコンパイルできます。
一歩踏み出せない方は、LESSからはじめてみるのも良いのではないでしょうか。