Sass（SCSS）を使うために必要な設定の方法と、SCSSの基本的な書き方、変数、よく使いそうな関数の使い方をまとめています。

Sassとは

Sassは、入れ子記述（ネスト）や変数・関数などのCSSにはない機能を使って、CSSを便利に使えるように拡張した言語です。
CSSとは別ファイルで書き、実際はCSSにコンパイル（変換）して読み込まれます。

※Sassの書き方にはSASSとSCSSの2通りありますが、SCSSの方が主流らしいので、この記事ではSCSSについて書きます。

SCSSの基本的な書き方

ネストして（入れ子で）記述すると親要素と子要素の関係を表すことができ、CSSよりシンプルに短く書くことができます。

セレクタに「&」を使うと、ネストしている親セレクタを参照することができます。

書き方の例。

a{font-size:16px;&:hover:opacity:0.5;span{color:red;}}

コンパイル（変換）後のCSSはこうなります。

a{font-size:16px;}a:hover{opacity:0.5;}aspan{color:red;}

コメントは以下のように記述します。

/* このように記述します *///1行ならこれでもコメントにできます（※この書き方だと、SCSSからCSSに変換する時に消える）

変数の使い方

変数とはデータにつけるラベルのことです。
変数使うと、同じ値を繰り返し使ったり、後から全ての値を一括で変更したりすることができます。

基本的な変数の使い方

繰り返し使いたい値に名前をつけて、以下の形で代入します。

$変数名: 値;

書き方の例。$baceFontSize;に16pxを代入して、pのフォントサイズに使っています。

$baceFontSize:16px;p{font-size:$baceFontSize;}

数値の計算

変数が数値なら、代入して計算が可能です。（+, -, *, /, %など）

$変数名 + 2px;

文字列の結合

変数と文字列を結合する場合は、このように記述します。

$変数名 + ”文字列”;

文字列の中で変数を展開する場合は、#{}を使って文字列の中に入れることができます。

”#{$変数名}文字列”;

スタイルを継承する（extend）

Sassでは、1度定義したクラスを他のクラスにも継承して使い、コードを短くすることができます。
手軽に使えて、スタイルがグルーピングされてコードが短くなるというメリットがあります。

extendの基本的な使い方

このように、再利用したいスタイルを定義します。

.クラス名 {
    プロパティ: 値;
}

@extendを使って、利用したい位置で呼び出します。

@extend .クラス名;

書き方の例。.base-borderを別の場所で呼び出して利用しています。

.base-border{border:1pxsolid#000;border-radius:16px;}.box1{@extend.base-border;width:100%;}

コンパイル（変換）後のCSSはこうなります。

.base-border{border:1pxsolid#000;border-radius:16px;}.box1{border:1pxsolid#000;border-radius:16px;width:100%;}

プレースホルダーを使ったextendの書き方

上記の書き方だと、スタイルのグループを定義するための.base-borderというクラスが無駄に存在することになってしまうので、そのクラスを"%"を使いプレースホルダーとして記述し、コンパイル（変換）後のCSSファイルでは残らないようにします。

プレースホルダーを使った書き方の例。

%base-border{border:1pxsolid#000;border-radius:16px;}.box1{@extend.base-border;width:100%;}

コンパイル（変換）後のCSSはこうなります。%base-borderが消えます。

.box1{border:1pxsolid#000;border-radius:16px;width:100%;}

スタイルを使い回す（mixin）

mixinを使うと、CSSのスタイルをまとめて定義しておき、何回でも使い回すことができます。
extendと似ていますが、引数が使えることが1番のメリットです。
ただ、引数を使わない場合はmixinではなく、短いコードで済むextendを使った方がよさそうです。（状況によるかもですが）

mixinの基本的な使い方

使い回したいスタイルを、以下の形で定義します。

@mixin mixin名 {
    プロパティ: 値;
}

@includeを使って、利用したい位置で呼び出します。

@include mixin名;

引数を使ったmixinの使い方

引数（ひきすう）とは、「引き渡す値」のことです。
これを使うと、先ほどと同じくスタイルを使いまわせると同時に、スタイルの中の変数を入れた箇所に指定した引数を入れることができます。

使い回したいスタイルを、以下の形で定義します。
※引数は、”,”で区切ることで複数入れることができます。
※引数の初期値を設定する場合は、mixinを定義する時に($引数名: 値)の形で入れることができます。

@mixin mixin名($引数名1, $引数名2) {
    プロパティ: $引数名1;
    プロパティ: $引数名2;
}

@includeを使って、利用したい位置で呼び出します。

@include mixin名($引数1,$引数2);

書き方の例。

@mixinbaseBox($width,$height){padding:16px;width:$width;height:$height;}.box1{@includebaseBox(300px,200px);}

コンパイル（変換）後のCSSはこうなります。

.box1{padding:16px;width:300px;height:200px;}

使えるいろいろな関数

色関連の関数

Sassでは、変数に設定した色を、関数を使って以下のように調整することができます。

• lighten($baceColor, 20%); ：明度を上げる
• darken($baceColor, 20%); ：明度を下げる
• saturate($baseColor, 20%); ：彩度を上げる
• desaturate($baceColor, 20%); ：彩度を下げる
• adjust-hue($baceColor, 50deg); ：色相を変える
• invert($baceColor); ：色を反転する
• grayscale($baceColor); ：グレースケールにする
• complement($baceColor); ：補色に変える
• mix(#fff, #000, 50%); ：2つのカラーコードの中間色にする
• rgba($baceColor, 0.5); ：透明度を変える

数値関連の関数

• round($number) ：四捨五入
• ceil($number) ：小数点以下を切り上げ
• floor($number) ：小数点以下を切捨て
• abs($number) ：絶対値（正の値）を返す
• percentage($number) ：パーセント形式に変換
• min($numbers…) ：引数で渡した値の中から最も小さい値を返す
• max($numbers…) ：引数で渡した値の中から最も大きい値を返す

その他

• random() ：0〜1までのランダムな数値を返す（値に数値を入れると、1〜入れた数値の間でランダムな数値を返す）
• nth(n) ：配列からn番目の値を返す
• quote() ：入れた値をダブルクオーテーションで囲って出力する

自作関数（function）

Sassの関数は自作することもできます。
以下の形で記述します。

@function カスタム関数名($引数名){
    @return 引数を使った返り値;
}

書き方の例。引数に入れた文字列の値を連結する関数を作る場合、このようになります。

@functionhello($key){@return$key+",world";}.sample{content:hello("hello");}

コンパイル（変換）後のCSSはこうなります。

.sample{content:"hello,world";}

条件分岐 / 繰り返し処理

Sassでは関数の条件分岐や繰り返し処理を使うことができ、コンパイルされたCSSには実行された結果の内容が出力されます。

条件分岐（if）

指定した条件に当てはまる場合に適用するプロパティを指定します。

@if 条件{
  適用したいプロパティ: 値
}

複数の条件を指定する時はこのように書きます。

@if 条件１ {
  条件１の場合に適用したいプロパティ: 値;
} @else if 条件２ {
  条件２の場合に適用したいプロパティ: 値;
} @else {
  上記以外の場合に適用したいプロパティ: 値;
}

繰り返し処理（for）

開始値から1つずつ数値を増やしながら（もしくは減らしながら）繰り返して処理をし、終了値の値まで来たら、繰り返しを終了します。

@for $変数名 from 開始値 through 終了値 {
  処理（スタイルなど）
}

繰り返し処理（while）

繰り返しを継続する条件を超えるまで、（繰り返しの継続を終了する為の）処理を何度か繰り返します。

@while 繰り返しを継続する条件式 {
  処理（スタイルなど）
  繰り返しの継続を終了する為の処理
}

Saasを初めて使う時の設定方法

初回の設定方法です。
※チートシートとしてこの記事を見返す時にこの章が冒頭にあると邪魔なので下に動かしました（自己都合）

Sassのインストール

1.Rubyがインストールされているか確認（されていなければインストール）

$  ruby -v

2.gemを最新版にアップデート

$ gem update --system

3.Sassをインストール

$ gem install sass

自動コンパイルの設定（VScodeの場合）

やり方は他にもいろいろあると思いますが、今回はこの方法で設定しました。

1. VScodeから、拡張機能「Live Sass Compiler」をインストール。
2. CSSフォルダにstyle.scssファイルを作成。
3. SCSS記述方式でコードを書いて保存。
4. 画面下部の「Watch Sass」をクリックしてアクティブにする。

　↓
以後、セーブする度に自動でコンパイル（CSSファイルに変換）される。

*コンパイルされたCSSファイルの出力先を変えるには、設定からjsonファイルを編集する。
詳しく：VSCodeでSass(Scss)を自動コンパイルする簡単な設定方法

最後に

今までひたすら地道にCSSを打ちこんでいましたが、今さらながらSCSSを使いはじめたので、勉強がてらまとめてみました。
思っていた10倍くらい奥が深くて、思っていた10倍くらいの長さになってしまった...。
これからCSS（SCSS）を書くのがもっと楽しくなりそうなので、休日半日潰して勉強してよかったです。
（もし間違いなどあれば、教えていただけるとありがたいです。）

参考にさせていただいた記事など

• ドットインストール「Sass/SCSS入門」
• Sass公式サイト
• Web Design Leaves/SASS
• VSCodeでSass(Scss)を自動コンパイルする簡単な設定方法
• Sassの教科書/第8章 全機能Sassリファレンス/8-7 関数一覧
• Sassの「@mixin（ミックスイン）」の使い方と「引数」の解説
• @extendを使うべき時、@mixinを使うべき時
• Sassの「@mixinと@extendの違い」と使い分け
• Sassの@for、@while、@eachの「ループ処理（繰り返し）」の使い方