scss

Sassは、CSSをより便利に効率

簡単にするためのさまざまな機能があります。

記述の簡略化ができる

親子関係にあるセレクタを入れ子(ネスト)にして書くことができます。CSS
では、親の要素から対象要素までのセレクタを何度も書く必要がありますが、
Sassはネストさせることで、同じ親のセレクタをまとめることができます。

同じ値を使いまわすことができる

CSSでは、例えば複数の要素に同じ色を適用させる場合、何度も同じスタイ
ルを書かなければなりませんが、Sassでは「変数」を使うことによって、同じ値
を使いまわせます

四則演算が使える

あらゆる値に対して、四則演算を使うことができます。これにより、widthか
らpaddingの値を引いたり、画像のサイズを半分に割ってRetinaディスプレイ
などの高解像度端末に対応させたりといった使い方ができます。

一度使ったセレクタを使いまわせる

@extend という機能を使えば、一度使ったセレクタのスタイルを、別のセレク
タでも使うことができます。同じスタイルを何度も書く手間から開放され、コン
パイル後のCSSはグループ化されるので、非常に合理的なソースになります。
コードの再利用が可能
スタイルをまとめてテンプレートやモジュールのように定義し、それらを簡単
に読み込んで使うことができます。また、引数を指定することで部分的に値を変
えるといった、複雑な処理をすることも可能となっています。この機能は、ミッ
クスインと呼ばれており、Sassの中でも最も強力な機能の1つです。
1 つの CSS ファイルにまとめることができる
「パーシャル」という機能を使うことで、複数のSassファイルをコンパイル時
に1つのCSSファイルとしてまとめることが可能です。これにより、HTTPリ
クエストを減らしつつ、Sassファイルを分割して管理しやすくできます。

条件分岐などのプログラム的な処理ができる

条件分岐や繰り返し処理などの制御構文が使えます。各制御構文を使うことで、
複雑な処理が可能になり、ミックスインなどと組み合わせることで、非常に強力
な機能になります。

参考
http://book.scss.jp/about/c1/01.pdf
https://itstudio.co/2016/05/23/5755/