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;
}
a span {
color: red;
}
コメントは以下のように記述します。
.scss
/* このように記述します */
//1行ならこれでもコメントにできます（※この書き方だと、SCSSからCSSに変換する時に消える）
変数の使い方
変数とはデータにつけるラベルのことです。
変数使うと、同じ値を繰り返し使ったり、後から全ての値を一括で変更したりすることができます。
基本的な変数の使い方
繰り返し使いたい値に名前をつけて、以下の形で代入します。
$変数名: 値;
書き方の例。$baceFontSize;に16pxを代入して、pのフォントサイズに使っています。
.scss
$baceFontSize: 16px;
p {
font-size: $baceFontSize;
}
数値の計算
変数が数値なら、代入して計算が可能です。（+, -, *, /, %など）
$変数名 + 2px;
文字列の結合
変数と文字列を結合する場合は、このように記述します。
$変数名 + "文字列";
文字列の中で変数を展開する場合は、#{}を使って文字列の中に入れることができます。
"#{$変数名}文字列";
スタイルを継承する（extend）
Sassでは、1度定義したクラスを他のクラスにも継承して使い、コードを短くすることができます。
手軽に使えて、スタイルがグルーピングされてコードが短くなるというメリットがあります。
extendの基本的な使い方
このように、再利用したいスタイルを定義します。
.クラス名 {
プロパティ: 値;
}
@extendを使って、利用したい位置で呼び出します。
@extend .クラス名;
書き方の例。.base-borderを別の場所で呼び出して利用しています。
.base-border {
border: 1px solid #000;
border-radius: 16px;
}
.box1 {
@extend .base-border;
width: 100%;
}
↓コンパイル（変換）後のCSSはこうなります。
.css
.base-border {
border: 1px solid #000;
border-radius: 16px;
}
.box1 {
border: 1px solid #000;
border-radius: 16px;
width: 100%;
}
プレースホルダーを使ったextendの書き方
上記の書き方だと、スタイルのグループを定義するための.base-borderというクラスが無駄に存在することになってしまうので、そのクラスを"%"を使いプレースホルダーとして記述し、コンパイル（変換）後のCSSファイルでは残らないようにします。
プレースホルダーを使った書き方の例。
%base-border {
border: 1px solid #000;
border-radius: 16px;
}
.box1 {
@extend .base-border;
width: 100%;
}
↓コンパイル（変換）後のCSSはこうなります。%base-borderが消えます。
.css
.box1 {
border: 1px solid #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);
書き方の例。
@mixin baseBox($width, $height) {
padding: 16px;
width: $width;
height: $height;
}
.box1 {
@include baseBox(300px, 200px);
}
↓コンパイル（変換）後のCSSはこうなります。
.box1 {
padding: 16px;
width: 300px;
height: 200px;
}
条件分岐 / 繰り返し処理
Sassでは関数の条件分岐や繰り返し処理を使うことができ、コンパイルされたCSSには実行された結果の内容が出力されます。
条件分岐（if）
指定した条件に当てはまる場合に適用するプロパティを指定します。
@if 条件{
適用したいプロパティ: 値
}
複数の条件を指定する時はこのように書きます。
@if 条件１ {
条件１の場合に適用したいプロパティ: 値;
} @else if 条件２ {
条件２の場合に適用したいプロパティ: 値;
} @else {
上記以外の場合に適用したいプロパティ: 値;
}
書き方の例。$debugModeがtrueの時は文字色を青、そうでない時は赤にする場合は、このように書きます。
$debugMode = true
@if $debugMode == true {
color: blue;
} @else {
color: red;
}
//この場合の結果は文字色が青になります
繰り返し処理（for）
開始値から1つずつ数値を増やしながら（もしくは減らしながら）繰り返して処理をし、終了値の値まで来たら、繰り返しを終了します。
@for $変数名 from 開始値 through 終了値 {
処理（スタイルなど）
}
書き方の例。12から14までの数字を変数として代入し、文字サイズを指定するクラスを作成する時は、このように書きます。
@for $i from 12 through 14 {
.fs#{$i} {font-size: #{$i}px;}
}
↓コンパイル（変換）後のCSSはこうなります。
.fs12 {
font-size: 12px;
}
.fs13 {
font-size: 13px;
}
.fs14 {
font-size: 14px;
}
繰り返し処理（while）
繰り返しを継続する条件を超えるまで、（繰り返しの継続を終了する為の）処理を何度か繰り返します。
@while 繰り返しを継続する条件式 {
処理（スタイルなど）
繰り返しの継続を終了する為の処理
}
書き方の例。先ほどの@for文と同じ内容を@while文で書くとこのようになります。
@while $i <=14 {
.fs#{$i} {font-size: #{$i}px;}
$i: $i + 1;
}
繰り返し処理（each）
1つの変数の中に複数の値を入れたものを「配列」といい、この配列の個数分、処理を繰り返します。
@each $変数名 in 値1, 値2... {
処理（スタイルなど）
}
もしくは、このような書き方でも同じ結果になります。
$リスト名: 値1, 値2... ;
@each $変数名 in $リスト名{
処理（スタイルなど）
}
書き方の例。cat, dog, rabbitという3つの配列を使って、背景画像を指定する3つのクラスを作る場合、このように書きます。
@each $animal in cat, dog, rabbit {
.#{$animal}-icon { background-color: url("#{$animal}.png");}
}
↓コンパイル（変換）後のCSSはこうなります。
.cat-icon {
background-color: url("cat.png");
}
.dog-icon {
background-color: url("dog.png");
}
.rabbit-icon {
background-color: url("rabbit.png");
}
使えるいろいろな関数
色関連の関数
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 引数を使った返り値;
}
書き方の例。引数に入れた文字列の値を連結する関数を作る場合、このようになります。
@function hello($key){
@return $key + ",world";
}
.sample{
content: hello("hello");
}
↓コンパイル（変換）後のCSSはこうなります。
.sample {
content: "hello,world";
}
設定情報などを別ファイルで管理
開発を進めていく中で、上記で紹介したような自作関数や設定情報がたくさん作られると膨大な行数になってしまうため、ファイルを分けて管理することが多いです。
そのように分離したSassファイルはパーシャルと呼ばれ、アンダーバー（_）から始まるファイル名をつけます。
パーシャルファイルはCSSファイルには変換されないため、CSSファイルとして変換されるメインのSCSSファイルから読み込まれます。
使い方の例。
...
...
読み込む時は、@importをつけて読み込みます。
@import "settings";
@import "function";
もしくは、まとめて書くすることもできます。
@import "settings", "function";
これで、"style.scss"の中で2つのパーシャルファイルが読み込まれるようになります。
Saasを初めて使う時の設定方法
初回の設定方法についても簡単に載せておきます。
※チートシートとして記事を見る時にこの章が冒頭にあると邪魔なので、最後に動かしました（自己都合）。
Sassのインストール
1.Rubyがインストールされているか確認（されていなければインストール）
$ ruby -v
2.gemを最新版にアップデート
$ gem update --system
3.Sassをインストール
$ gem install sass
自動コンパイルの設定（VScodeの場合）
やり方は他にもあると思いますが、今回はこの方法で設定しました。
- VScodeから、拡張機能「Live Sass Compiler」をインストール。
- CSSフォルダにstyle.scssファイルを作成。
- SCSS記述方式でコードを書いて保存。
- 画面下部の「Watch Sass」をクリックしてアクティブにする。
→以後、セーブする度に自動でコンパイル（CSSファイルに変換）されます。
*コンパイルされたCSSファイルの出力先を変えるには、設定からjsonファイルを編集します。
詳しく：VSCodeでSass(Scss)を自動コンパイルする簡単な設定方法
最後に
今までひたすら地道にCSSを打ちこんでいましたが、今さらながらSCSSを使いはじめたので、勉強がてらまとめてみました。
思っていた10倍くらい奥が深くて、思っていた10倍くらいの長さになってしまった...。
これからCSS（SCSS）を書くのがもっと楽しくなりそうなので、休日半日潰して勉強してよかったです。
（もし間違いなどあれば、教えていただけるとありがたいです。）