staffSASS,LESS,PostCSSの3つの言語それぞれのメリットデメリット、使い方をまとめます。ネスト、ミックスイン、外部ファイルの読み込み、複数のCSS定義の結合などができる点が便利です。SASS自体はCSSとは異なる文法・記法で定義されていたが、現在はCSSの文法に上記の機能を取り入れたSCSSという言語を利用できるようになったため、通常のCSSと同じ遜色のない上位互換として認識されている。デメリットとしては、導入に少し手間がかかる程度で、始めにほんの少しの手間をかければその後の作業が楽になると考えれば些細なことではないでしょうか。LESSメリットはSASSとほとんど同じで、変数やネスト、算術演算が使えます。SASSとの違いは、SASSがRubyをベースにしているのに対して、LESSはJavscriptをベースにしている点です。そのため最初はSASSよりもLESSの方が主流でしたが、SCSSの登場で使いやすさに差はなくなり、より豊富な機能を持つSASSへと人気は移っていきました。$red;}変数とは何かを入れる箱のようなもので、CSSでは変数を作る、変数に入れる、変数を参照する、の3つを行うことができます。上の例では、変数redを作り、その変数redに#cc0432を入れて、参照しています。変数においてのSassとLessの違いは$と@の差だけです。}}ネストとは入れ子構造とも言われており、同じクラス名のついているものをまとめることができます。ネストはSass、Less共に同じ書き方になっていて違いはありません。CSSに変換後は以下のようになります。5);}四則演算も同様にSassとLessでの違いはありません。ミックスインは定義と読み込みの2つを行うことができ、一度定義したスタイルを同ファイル中に何度も読み込むことができます。つける必要がありますがLessの方には必要ないという違いがあります。PostCSSPostCssは多数のプラグインをインストールすることでSassやLessと同じように使えます。@importしたファイルを展開するプラグインです。下記で紹介するプラグインでエラーを起こさないためにもあらかじめインストールしておく必要があります。ScssやLessのように変数を使えるようになるプラグインで、文法もほとんど同じです。こちらもScssやLessと同じようにネストを使えるようになるプラグインです。ミックスインのプラグイン。font-size:5px;}PostCssは既存のツールと比べてパフォーマンスが非常にたかく、今後はSASSからPostCSSへと移っていく可能性が高いとみられているようです。コメントをキャンセルメールアドレスが公開されることはありません。