こまごま、SCSSの基本機能について整理しておく。
変数
SCSSではプログラミング言語のように変数を使用することができる。CSSのカスタムプロパティとは全く別の機能。
// $をつけた変数名を定義し、値を代入する
// 波括弧の外に記述すると、グローバルな変数として扱われる
$mainColor: red;
$mainFontSize: 16px;
h1 {
color: $mainColor;
font-size: $mainFontSize;
}コンパイルするとこうなる。
h1 {
color: red;
font-size: 16px;
}カスタムプロパティとの違いは https://www.webcreatorbox.com/tech/css-variables が詳しい。
プロパティの値以外にも、特定の文字列や真偽値、リストや辞書などけっこう色んなものを定義することができる。
注意点としては、アンダースコアとハイフンが同じ文字として評価されてしまうことなどがある。基本的にはアンダースコアで統一したほうが良さそう。
入れ子の記法
<div class="contentWrap">
<h1 class="contentWrap__leadText">Hello!</h1>
<p class="contentWrap__paragraph">Helloとは英語で挨拶を意味する</p>
</div>こんなHTMLに対して、SCSSを入れ子で設定する。
.contentWrap {
width: 100%;
.contentWrap__leadText {
font-size: 3rem;
color: red;
}
.contentWrap__paragraph {
font-size: 1rem;
&:hover {
font-color: Blue;
}
}
}これをコンパイルすると
.contentWrap {
width: 100%;
}
.contentWrap .contentWrap__leadText {
font-size: 3rem;
color: red;
}
.contentWrap .contentWrap__paragraph {
font-size: 1rem;
}
.contentWrap .contentWrap__paragraph:hover {
font-color: Blue;
}親子関係を自動で記述して出力してくれる。BEMで記述しているときの強い味方。
疑似要素などを適用させたい場合は、対象とするプロパティをネストし、「&」で参照することができる。
@extend
@extendを使うと、記述済みのCSSを参照することができる。
.btn {
width: 100px;
height: 50px;
}
.btn--blue {
@extend .btn;
background-color: blue;
}
.btn--red {
@extend .btn;
background-color: red;
}コンパイルすると
.btn, .btn--blue, .btn--red {
width: 100px;
height: 50px;
}
.btn--blue {
background-color: blue;
}
.btn--red {
background-color: red;
}共通のスタイルはまとめられ、固有のスタイルはそれぞれ個別に記述される。
このケースだと.btnが共通スタイルを記述するためだけに存在する、という場合がある。そうした場合にコンパイル後に出力される必要がない。
その場合はクラスの代わりに％を使用することで、出力対象から除外することができる。
%btn {
width: 100px;
height: 50px;
}
.btn--blue {
@extend %btn;
background-color: blue;
}
.btn--red {
@extend %btn;
background-color: red;
}コンパイル
.btn--blue, .btn--red {
width: 100px;
height: 50px;
}
.btn--blue {
background-color: blue;
}
.btn--red {
background-color: red;
}ふむふむ
参考文献
