大量にCSSを書いてるとファイルが肥大化しすぎて管理しづらくなってくる。
そんな時に超絶おすすめなSCSSの使い方やメリットを簡単に記載する。

SCSSって何？

公式：https://sass-lang.com/
簡単にいうとCSSの拡張版。CSSを効率的に書くための記法になる。
同じような拡張版でSaSSというものがある。
SaSSはRubyっぽい記法なのが特徴。元々はSaSSから始まったが、この記法がデザイナーから不評だったらしく
CSS3っぽく書けるSCSSが主流になっているらしい。

SCSSの使い方

cssと同様、スタイルファイルの拡張子に.scssをつける。
ただし、scssの拡張子のままではhtmlが読み込んでくれないため.scssのファイルをコンパイルしてやって.cssに変換する必要がある。

コンパイル方法

色々なやり方があるが、VScodeの拡張機能を使うと簡単なため今回はこの方法を記載する

拡張機能「Easy Sass」

公式：https://marketplace.visualstudio.com/items?itemName=spook.easysass
Easy Sassを使うと、ファイルを保存した時に自動でコンパイルが走ってくれる。
ただし複数のファイルをmainのファイルにimport(後述記載)してる場合、import先のファイルは変更後に自動でコンパイルされるがmainのファイルはコンパイルされないため、手動でコンパイルしてやる必要がある。
コマンドパレットから「Compile all SCSS/SASS files in the project」を打つと全てのファイルが一括でコンパイルできる。

出力ファイル

デフォルトの設定だとEasy SaSSからコンパイルされて出来上がるファイルは.cssと.min.cssの２ファイルになる。
.min.cssはcssファイルを圧縮したもので、普通の.cssファイルよりサイズが軽量になっている。
この.min.cssファイルを出力させないようにするには
基本設定 -> 設定 -> 拡張機能 -> EasySass configuration -> Formats で

"easysass.formats":[{"format":"expanded","extension":".css"}]

を入力してやれば良い

SCSSの便利な機能

色々あるが、よく使いそうな機能をいくつか紹介する

変数宣言

SCSSは変数が使える。
サイトのベースになる設定を変数に宣言しておくと、後々変更が入った際など修正が楽になる

$base_color:red;$base_width:300px;$base_height:300px;$base_bg_color:blue;.myCss{color:$base_color;width:$base_width;height:$base_height;background-color:$base_bg_color;}

ネスト(入れ子)

SCSSはスタイルをネストで記載できる。
ネストで書くことによってファイルの肥大化を抑え、管理が容易になる。

例えば通常のCSSの場合

.myCss{font-size:12px;}.myCssul{list-style:none;}.myCssulli{color:red;}

と書くところを

.myCss{font-size:12px;ul{list-style:none;li{color:red;}}}

と書ける

「&」で条件分岐

擬似クラスもネストで簡単に書ける。
直感的に書けるのでかなりわかりやすい。

.myCss{color:red;&:hover{color:blue;}&:active{color:green;}}

mixin

mixinは関数のようなもので、使い回すような設定をあらかじめ@mixinで定義しておき、@includeで呼び出すことができる。例えば変数と組み合わせると、メディアクエリの設定が簡単になったりする。

// メディアを定義$media:("sp":"screen and (max-width: 767px)","tab":"screen and (max-width: 1024px - 1px)","pc":"screen and (min-width: 1024px)");// mixinを定義@mixinmq($breakpoint:sp){@media#{map-get($media,$breakpoint)}{@content;}}// includeで呼び出し.myCss{@includemq('pc'){color:red;}@includemq('tab'){color:blue;}@includemq('sp'){color:green;}}

四則演算

CSSではcalc関数で四則演算ができるが、SCSSで関数を使わずに計算ができる。

.myCss{width:(320/1200)*100%;height:(200/480)*100%;background-color:red;}

外部ファイルの読み込み

SCSSでは設定ファイルをいくつかに分け、@importで読み込むことができる。
例えば役割ごとに設定ファイルを分けることで保守性が上がり、管理がしやすくなる。
また、読み込むファイルは先頭に「_」をつける。

├── index.html
├── css
│   ├── style.scss
│   ├── var　　// 変数定義
│   │     └──_var.scss
│   ├── mixin　　// maxin定義
│   │     └──_mixin.scss
│   └── page　　// スタイリング定義
│          ├──_header.scss
│          ├──_body.scss
│          └──_footer.scss

style.scssで読み込む。
変数やmixinはpageよりも先に読み込むのを注意。

@import"var/**";@import"mixin/**";@import"page/**";

extend(継承)

extendは定義しているスタイルを継承することができる。

.myCss{width:(320/1200)*100%;height:(200/480)*100%;background-color:red;}.myCss2{@extend.myCss;}

こう書くと、myCss2クラスにmyCssクラスのスタイルが継承される。
ちなみに同名のプロパティを上書きした場合、上書きした内容が優先される。

.myCss{width:(320/1200)*100%;height:(200/480)*100%;background-color:red;}.myCss2{@extend.myCss;background-color:blue;// blueが優先される}