SASS,LESS,PostCSSの違いと使い方

SASS,LESS,PostCSSの3つの言語それぞれのメリットデメリット、使い方をまとめます。

SASS

SASSは現在最も主流とされており、通常のCSSと比較すると、変数、算術演算、ネスト、ミックスイン、外部ファイルの読み込み、複数のCSS定義の結合などができる点が便利です。 SASS自体はCSSとは異なる文法・記法で定義されていたが、現在はCSSの文法に上記の機能を取り入れたSCSSという言語を利用できるようになったため、通常のCSSと同じ遜色のない上位互換として認識されている。 デメリットとしては、導入に少し手間がかかる程度で、始めにほんの少しの手間をかければその後の作業が楽になると考えれば些細なことではないでしょうか。

LESS

メリットはSASSとほとんど同じで、変数やネスト、算術演算が使えます。 SASSとの違いは、SASSがRubyをベースにしているのに対して、LESSはJavscriptをベースにしている点です。 そのため最初はSASSよりもLESSの方が主流でしたが、SCSSの登場で使いやすさに差はなくなり、より豊富な機能を持つSASSへと人気は移っていきました。 変数 Sass
 $red: #cc0432;
 .main{
      color: $red;
}
 .btn{
     background-color: $red;
}
Less
 @red: #cc0432
 .main{
      color: @red;
}
 .btn{
     background-color: $red;
}
変数とは何かを入れる箱のようなもので、CSSでは変数を作る、変数に入れる、変数を参照する、の3つを行うことができます。 上の例では、変数redを作り、その変数redに#cc0432を入れて、参照しています。 変数においてのSassとLessの違いは$と@の差だけです。 ネスト Sass,Less
 .main {
     width: 200px;
     padding: 10px;
 
     .btn {
          background-color: #000;
     }
}
ネストとは入れ子構造とも言われており、同じクラス名のついているものをまとめることができます。 ネストはSass、Less共に同じ書き方になっていて違いはありません。 CSSに変換後は以下のようになります。
 .main {
     width: 200px;
     padding: 10px;
}
 
 .main .btn {
          background-color: #000;
}

四則演算 Sass,Less

.test1 {
	width: 500px + 50;
}

.test2 {
	width: 500px - 50;
}

.test3 {
	width: 500px * 5;
}

.test4 {
	width: (500px / 5);
}

四則演算も同様にSassとLessでの違いはありません。 ミックスイン Sass
@mixin inline_block($value: 3px)  {  
    display: inline-block;  
    *display: inline;  
    border-radius: $value;
}  
   
.sampleBox {  
    @include inline_block(5px);  
    background: #eee;  
}  
css変換後
.sampleBox {  
    display: inline-block;  
    *display: inline;  
    border-radius: 5px;
    background: #eee;  
}  
Less
.inline_block($value: 3px) {  
    display: inline-block;  
    *display: inline;  
    border-radius: $value;
}  
   
.sampleBox {  
    .inline_block(5px);  
    background: #eee;  
}  
css変換後
.sampleBox {  
    display: inline-block;  
    *display: inline;  
    border-radius: 5px;
    background: #eee;  
}  
ミックスインは定義と読み込みの2つを行うことができ、一度定義したスタイルを同ファイル中に何度も読み込むことができます。 Sassの方では頭に@mixin をつける必要がありますがLessの方には必要ないという違いがあります。

PostCSS

PostCssは多数のプラグインをインストールすることでSassやLessと同じように使えます。 【postcss-import】 @importしたファイルを展開するプラグインです。 下記で紹介するプラグインでエラーを起こさないためにもあらかじめインストールしておく必要があります。 【postcss-simple-vars】 ScssやLessのように変数を使えるようになるプラグインで、文法もほとんど同じです。
$blue:   #056ef0;
$column: 200px;

.menu_link {
    background: $blue;
    width: $column;
}
変換後
.menu_link {
    background: #056ef0;
    width: 200px;
}

postcss-nested】 こちらもScssやLessと同じようにネストを使えるようになるプラグインです。
.title {
    width: 500px;
    
    body.is_dark{
    color: white;
  }
}
変換後
.title {
    width: 500px;
}
.title body.is_dark{
    color: white;
}
postcss-mixins】 同じくミックスインのプラグイン。
@define-mixin icon $value: 3px { 
    color: blue;
    font-size: $value;
}    

.icon{
    @mixin icon 5px;
}
変換後
.icon {
    color: blue;
    font-size:5px;
}
  PostCssは既存のツールと比べてパフォーマンスが非常にたかく、今後はSASSからPostCSSへと移っていく可能性が高いとみられているようです。 公式リンク Sass http://sass-lang.com/ Less http://lesscss.org/ PostCss https://github.com/postcss/postcss

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です