この記事はSCSS環境構築まとめの続きという位置づけで書いています。
子孫セレクタのネスト
SCSSでは子孫セレクタをネストして書くことができます。
CSSの場合
nav ul {
background-color: #f00;
}
nav li {
color: #ff0;
}
SCSSの場合
nav {
ul {
background-color: #f00;
}
li {
color: #ff0;
}
}
このようにネストしてまとめて書くことができるので、親子関係がわかりやすくなります。
子セレクタ、隣接セレクタのネスト
子セレクタや隣接セレクタのみをネストしたい場合もあります。
CSSの場合
ul {
background-color: #ff0;
}
ul>li {
color: #f00;
}
SCSSの場合
ul {
background-color: #ff0;
>li {
color: #f00;
}
}
このように、子セレクタの頭に>を付けるだけで、子セレクタ扱いになります。
隣接セレクタの場合は、>の代わりに+です。
疑似クラス、疑似要素のネスト
疑似クラスや疑似要素もSCSSではネストして書くことができます。
CSSの場合
.save-btn {
background-color: #000;
}
.save-btn:hover {
background-color: #f00;
}
SCSSの場合
.save-btn {
background-color: #000;
&:hover {
background-color: #f00;
}
}
上のように、ホバー時やクリック時、:beforeや:afterなどもすべてネストして記述することができます。
プロパティのネスト
一部のプロパティもネストすることができます。
CSSの場合
.box {
font-color: #000;
font-weight: "bold";
}
SCSSの場合
.box {
font: {
color: #000;
weight: "bold";
}
}
このように、font-colorとfont-weight、background-colorとbackground-imageなどの初めの単語が同じプロパティはネストして書くことができます。
メディアクエリのネスト
メディアクエリもネストすることができます。
CSSの場合
div {
margin: 0 10px;
}
@media(max-width: 670px) {
div {
margin: 0;
}
}
SCSSの場合
div {
margin: 0 10px;
@media(max-width: 670px) {
margin: 0;
}
}
このように、メディアクエリをネストすることで一目で画面幅とその時に適用させたいCSSを見比べることができます。
変数
SCSSでは色などを変数に格納して開発を効率化できます(CSSでも似たようなことはできますが)。
CSSの場合
.style1 {
background-color: #f00;
}
.style2 {
background-color: #f00;
}
.style3 {
background-color: #f00;
}
#f00がメインカラーであるとします。
もしメインカラーが#ff0に変更になると、#f00と指定してある場所はすべて変更することになります。
これを解決するのが変数です。
SCSSの場合
$main-color: #f00;
.style1 {
background-color: $main-color;
}
.style2 {
background-color: $main-color;
}
.style3 {
background-color: $main-color;
}
値を変数に格納するには、上のように$変数名: 値;のように書きます。
変数を使う利点は、値に変更が生じたときに変数を定義している部分だけ書き換えればすべての値を変更できる点です。
演算
Sassでは値の演算もできます。(これもCSSでも似たようなことが可能です)
CSSの場合
横1920px,縦1042pxの画像を使用している想定です。
.main-img {
width: 100vw;
height: 54vw; /*≒1042÷1920×100vw*/
}
このように自分の手で計算してからサイズを指定する必要があります。
SCSSの場合
.main-img {
width: 100vw;
height: 1042/1920*100vw;
}
このように直接計算記号を使うことができるので、計算する手間を省くことができます。
単位の違う値でも計算することができるので、かなり便利です。
関数
SCSSには関数も用意されています。
lighten、darken
color: lighten(#fff000, 30%); /*#fff000を30%明るくする*/
color: darken(#fff000, 40%); /*#fff000を40%暗くする*/
↓ これが
color: #fff999;
color: #333000;
こうなる。
このように、lighten関数やdarken関数に色と割合を渡すと、渡した色を渡した割合だけ明るくしたり暗くしたりすることができます。
round
height: round(1042/1920*100vw);
↓これが
height: 54vw;
こうなる。
round関数は、入力した値を四捨五入してくれます。
他にも様々な関数がありますが、長くなるうえ、頻繁に使うものでもないのでここでは省略します。
コンポーネント
SCSSでは、ファイルをコンポーネントごとなどで分割して管理することで、保守性を高めることができます。
コンポーネントで分けたファイルを読み込むには、
@import "button";
button {
width: 20px;
height: 10px;
}
.blue-btn {
background-color: blue;
}
この時、"button"を定義するファイル名の頭にはアンダースコア_を入れる必要があります。
継承
SCSSでは、スタイルを継承してコードを短くする仕組みもあります。
CSSの場合
.btn {
width: 50px;
height: 20px;
}
.blue-btn {
width: 50px;
height: 20px;
background-color: blue;
}
CSSで書くと、このように同じスタイルを何度も書く必要が出てくる時があります。
SCSSの場合
.btn {
width: 50px;
height: 20px;
}
.blue-btn {
@extend .btn;
background-color: blue;
}
SCSSを使うと、このように共通のスタイルは@extendを使うことで省略することができます。
まとめ
ミックスインなどの機能もありますが、一部の機能は記事の長さと私自身がいまいち理解できていないという面から省略しています。
もし興味があったらリファレンス等で調べてみてください。
SCSSを使うと、コードの省略や分割の面でかなり有利になります。
SCSS便利なのでどんどん使っていきましょう!!