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)
|
1 2 3 4 5 6 7 8 |
.box{ .red{ background-color: #ff0000; } .blue{ background-color: #0000ff; } } |
LESS
|
1 2 3 4 5 6 7 8 |
.box{ .red{ background-color: #ff0000; } .blue{ background-color: #0000ff; } } |
↓
css
|
1 2 3 4 5 6 7 |
.box .red { background-color: #ff0000; } .box .blue { background-color: #0000ff; } |
■変数
変数の定義の仕方が微妙に違います。SASS(scss)なら「$」、LESSなら「@」です。
SASS(scss)
|
1 2 3 4 5 6 7 8 9 |
$red: #ff0000; .box{ .title{ background-color: $red; } .button{ background-color: $red; } } |
LESS
|
1 2 3 4 5 6 7 8 9 |
@red: #ff0000; .box{ .title{ background-color: @red; } .button{ background-color: @red; } } |
↓
css
|
1 2 3 4 5 6 7 |
.box .title { background-color: #ff0000; } .box .button { background-color: #ff0000; } |
■mixin
これはSASS(scss)とLESSで差があります。引数の定義は変数と同じで「$」「@」の差があります。LESSの方が簡単ですが、私はLESSだとclassと見分けがしづらいのでSASS(scss)のほうが好みです。
SASS(scss)
|
1 2 3 4 5 6 7 8 |
@mixin transformRotate($to) { -moz-transform: rotate($to); -webkit-transform: rotate($to); transform: rotate($to); } .box{ @include transformRotate(45deg); } |
LESS
|
1 2 3 4 5 6 7 8 |
.transformRotate(@to) { -moz-transform: rotate(@to); -webkit-transform: rotate(@to); transform: rotate(@to); } .box{ .transformRotate(45deg); } |
↓
css
|
1 2 3 4 5 |
.box { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } |
■インポート
SASS(scss)とLESSの差はありません。
SASS(scss)
|
1 |
@import "./mixin.scss"; |
LESS
|
1 |
@import "./mixin.less"; |
最後に
いかがでしたでしょうか。
SASSがRubyベース、LESSがJavaScriptベースと、裏側に差があり機能で「できること」「できないこと」がありますが、今回ご紹介した内容ではほとんど差がありませんね。
SASSの方が機能が多く、ウェブ上の情報・書籍の量でも一歩リードしているようですが、LESSもcssにより近いという意味で導入をしやすいメリットがあります。
LESSも SASS(scss)の入門 で紹介いたしました「Prepros」でコンパイルできます。
一歩踏み出せない方は、LESSからはじめてみるのも良いのではないでしょうか。
