今回はSCSSの基本的な記述方法を解説します。
基本的な記述方法
セレクタの入れ子
セレクタの中に更にセレクタを入れることができます。
.hoge {
background-color: red;
.hoge2 { // コンパイルすると.hoge .hoge2となる
background-color: blue;
}
}
このようにすることでCSSで.hoge .hoge2と記述していることと同じ意味となります。
&を使用して親セレクタの省略
入れ子になったセレクタ内で&を使用することで親要素を省略することができます。
.hoge {
background-color: red;
&__item { // コンパイルすると.hoge__itemとなる
background-color: blue;
}
}
このように記述することでCSSで.hoge__itemと記述したときと同じ意味となります。
BEMでのクラス命名などの際に非常に便利です。
変数を使用する
頻繁に使用する値（カラーコードなど）を変数に入れておくことで、好きな箇所で使い回すことができます。
変数の宣言方法は $変数名: 値 となっております。
$hogeVar: #ccf;
.hoge {
background-color: $hogeVar; // コンパイルすると#ccfとなる
}
function
functionを使用することで何か処理をした戻り値を値として使うことができます。
@function half($val) {
@return #{$val / 2}px;
}
.hoge {
width: half(300); //コンパイルすると150となる
}
halfに引数300を渡し、戻り値の150pxをwidthの値として使用しています。
mixinとinclude
mixinを使用することで特定のスタイルをテンプレートのように使い回すことができます。
@mixin button {
text-align: center;
border-radius: 10px;
background-color: black;
color: white;
display: inline-block;
padding: 16px 32px;
&:hover {
background-color: white;
color: black;
}
}
.btn {
@include button;
}
このようにすると.btnの中で@mixin buttonが展開されます。
mixinは引数を取ることもできます。
@mixin button($val1,$val2) {
text-align: center;
border-radius: 10px;
background-color: $val1;
color: $val2;
display: inline-block;
padding: 16px 32px;
&:hover {
background-color: $val2;
color: $val1;
}
}
.btn {
@include button(black,white);
}
デフォルト引数を指定することもできます。
@mixin button($val1:black,$val2:white) {
text-align: center;
border-radius: 10px;
background-color: $val1;
color: $val2;
display: inline-block;
padding: 16px 32px;
&:hover {
background-color: $val2;
color: $val1;
}
}
.btn {
@include button;
}
.btnでincludeした際に引数を渡していませんが、デフォルト引数としてblackとwhiteが設定されているため、blackとwhiteが$val1と$val2に入ります。
extendでスタイルを継承する
extendを使うことで特定の要素のスタイルをそのまま使うことができます。
.hoge {
background-color: red;
}
.fuga {
@extend .hoge;
// .hogeのスタイルがそのまま展開される
}
このようにすることで.hogeに指定されているスタイルを.fugaでそのまま使うことができます。
コンパイル後は複数指定でスタイルがあたります。
使いすぎると一度に指定されるセレクタが増え、可読性が下がるため注意が必要です。
以下のようになります。
.hoge,
.fuga {
background-color: red;
}
importで別ファイルのscssファイルを読み込む
scssのファイル内で別のscssファイルを読み込むことができます。
分割して管理することでメンテナンス性があがるため基本的には細かくファイルを分けた方がいいです。
まず、_hoge.scssというファイルを用意します。
ファイル名のはじめに_を入れることでそのファイルはコンパイル対象外となります。
// hoge.scssです
.hoge {
background-color: red;
}
次に同じディレクトリにfuga.scssを作成し、hoge.scssをimportします。
// fuga.scssです
@import './hoge';
.fuga {
background-color: blue;
}
このように記述しfuga.scssをコンパイルすることでfuga.scss内でimportしたhoge.scssが展開され、以下のようになります。
.hoge {
background-color: red;
}
.fuga {
background-color: blue;
}
基本的な使い方は以上となります。
次回は応用的な使い方などを解説したいと思います。
