大量に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;
}
.myCss ul {
list-style: none;
}
.myCss ul li {
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を定義
@mixin mq($breakpoint: sp) {
@media #{map-get($media, $breakpoint)} {
@content;
}
}
// includeで呼び出し
.myCss{
@include mq('pc'){
color: red;
}
@include mq('tab'){
color: blue;
}
@include mq('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が優先される
}