SCSS の基本的な書き方
SCSS を書く準備
ここでは、「node-sass による SASS 環境構築」で説明した Node プロジェクトを用いて、 SCSS を書いていきます。
今、test1.html として次の HTML があるとします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SASS Test 1</title>
<link rel="stylesheet" href="dist/css/test1.css" />
</head>
<body>
<p>
<button>Hello, SASS!</button>
<button class="cancel">Cancel</button>
</p>
</body>
</html>
そして、scss フォルダに test1.scss を作成します。
「node-sass による SASS 環境構築」で説明した方法を使うと、test1.scss を保存したタイミングで、CSS にコンパイルされ dist/css フォルダに test1.css が生成されます。
Visual Studio Code を使っている場合は、Live Server というエクステンションを使うと、HTML ファイルや CSS ファイルに変更があった時に直ちにブラウザの画面が更新されるので便利です。
エクステンションをインストールすると、HTML ファイルを右クリックした時に Live Server で開くオプションが追加されます。
Web 系の開発する人には、おすすめの便利なエクステンションです。
test1.scss というファイルを作成して、次のように書きます。
.btn {
padding: 10px 24px;
border-radius: 20px;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
color: white;
background-color: #1a75d4;
}
.btn:hover {
cursor: pointer;
}
.btn:focus {
outline: none;
}
.btn-cancel {
color: #333333;
background-color: #cccccc;
}
普通の CSS ですが、SCSS は CSS のスーパーセットなので、これも SCSS といえます。
さて、上の CSS によって次のような画面になるはずです。丸みのあるボタンが二つあります。
これをスタート地点にして、SCSS を使って少しずつ直していきましょう。
SCSS の基本的な書き方
ここでは SCSS の基本的な書き方を説明します。全てを網羅するわけではありませんので、ここで大体の感触を掴んだら、本家のリファレンスなどを参考にしてください。
SCSS ファイル内でのコメントの書き方
SCSS ソースコードでのコメントは、C++ や JavaScript と同様で、一行のときは //、複数行の時は /* */ が使えます。
1 行コメントは // から始まり、行末までがコメントになります。
// ここはコメント
複数行のコメントは /* から */ までがコメントになります。
/* ここから
複数行書くことができ
ここまでコメントです */このコメントは圧縮モードでコンパイルした時に、生成された CSS にはコメントは入りません。
一方、/*! から */ とすると、圧縮モードでも生成される CSS にコメントが入ります。利用規約等、最終成果物にもコメントを残す必要がある場合に便利です。
SCSS の親要素の参照方法
SCSS では {} を入れ子にすることで、CSS 要素の階層構造を表します。 そして、& によって、ネストされたブロックから親要素を参照できます。
上記の CSS コードは、SCSS の & を使って、次のように書き直せます。
.btn {
padding: 10px 24px;
border-radius: 20px;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
color: white;
background-color: #1a75d4;
&:hover {
cursor: pointer;
}
&:focus {
outline: none;
}
&-cancel {
color: #333333;
background-color: #cccccc;
}
}
SCSS の変数の書き方
SCSS では $変数名 という書き方で、変数を定義することができます。
上の例で font-family と背景色を変数としてひとまとめにすると、次のようにかけます。
$font-family: Arial, Helvetica, sans-serif;
$primary-color: #1a75d4;
$secondary-color: #cccccc;
.btn {
padding: 10px 24px;
border-radius: 20px;
font-size: 16px;
font-family: $font-family;
color: white;
background-color: $primary-color;
&:hover {
cursor: pointer;
}
&:focus {
outline: none;
}
&-cancel {
color: #333333;
background-color: $secondary-color;
}
}
変数名中のハイフン (-) とアンダースコア (_) は区別されません。つまり、$primary-color という変数と $primary_color は同一のものとみなされます。CSS はケバブケースで記述することが一般的なので、- で統一すると良いでしょう。
import の書き方
上の方法で変数を定義できましたが、これを複数のファイルから参照するには、どうしたらよいでしょうか。
この場合、ひとつのファイルに変数を定義しておき、それを他の SCSS ファイルから @import で取り込むことで、変数を使い回すことができます。
取り込ませて使うファイル名は、アンダースコア (_) で始めます。
例えば、変数名を定義するファイルは _variables.scss とします。
// _variables.scss
$font_family: Arial, Helvetica, sans-serif;
$primary-color: #1a75d4;
$secondary-color: #cccccc;
これを SCSS で取り込む場合には、ファイル名の先頭のアンダースコア _ と拡張子を除いた部分を指定します。
@import 'variables';
.btn {
padding: 10px 24px;
border-radius: 20px;
font-size: 16px;
font-family: $font-family;
color: white;
background-color: $primary-color;
&:hover {
cursor: pointer;
}
&:focus {
outline: none;
}
&-cancel {
color: #333333;
background-color: $secondary-color;
}
}
変数の定義だけでなく、関数の定義や、後述の mixin などを別ファイルに記述する場合も同様に、 ファイル名の先頭はアンダースコア、取り込む時はアンダースコア抜き、で取り込みます。
SCSS の関数の使い方
関数は @function というキーワードで定義できます。
_functions.scssという名前のファイルを作り、次の関数を作ります。
@function default-text-color($color) {
@if (lightness($color) > 50) {
@return #333333;
} @else {
@return #ffffff;
}
}
この関数は色の値を受け取り、その明るさが 50% より大きければ #33333 を返し、 それ以外では #ffffff を返します。
この関数を用いると、濃い色のボタンには白い文字を、 薄い色のボタンには黒に近い色の文字を、自動的にセットすることができます。
_functions.scss に定義した関数を使うには、 @import 'functions' としてファイルを取り込み、 CSS の属性として関数を記述します。
@import 'variables';
@import 'functions';
.btn {
padding: 10px 24px;
border-radius: 20px;
font-size: 16px;
font-family: $font-family;
color: default-text-color($primary-color);
background-color: $primary-color;
&:hover {
cursor: pointer;
}
&:focus {
outline: none;
}
&-cancel {
color: default-text-color($secondary-color);
background-color: $secondary-color;
}
}
試しに、_variables.scss で次のように色を変えてみます。
$font_family: Arial, Helvetica, sans-serif;
$primary-color: #1a75d4;
$secondary-color: #333; // 変更確かにキャンセルボタンの色が濃くなったことで、文字の色は白に変わりました。
ここでは書き方の説明に留めますが、この他にも各種ビルトイン関数が用意されていますので、リファレンスをみておくと良いと思います。
mixin の書き方
特定のコードを使い回す場合には、@mixin が使えます。
mixin (ミクスイン) というのは、一般に「mixin とはオブジェクト指向プログラミング言語において、サブクラスによって継承されることにより機能を提供し、単体で動作することを意図しないクラス」(Wikipedia より) のことです。
例えば、正方形を表す square という名前の @mixin を定義するには、縦横同じ長さにして次のように記述します。
@mixin square($size) {
width: $size * 1px;
height: $size * 1px;
}
#{$size}px と書かずに $size * 1pxと書く理由については、 「SASS の文字列インターポレーション」をみてください。
このミクスインを次のように使います。
@import "variables";
@import "functions";
@import "mixins";
.btn {
@include square(150);
padding: 10px 24px;
border-radius: 20px;
font-size: 16px;
font-family: $font-family;
color: default-text-color($primary-color);
background-color: $primary-color;
&:hover {
cursor: pointer;
}
&:focus {
outline: none;
}
&-cancel {
color: default-text-color($secondary-color);
background-color: $secondary-color;
}
}
この結果、次のようになります。
さらに、縦横同じサイズという特徴が同じなので、円を表す circle という名前の mixin を定義してみましょう。
この場合、square を利用して、次のように書けます。
@mixin square($size) {
width: $size * 1px;
height: $size * 1px;
}
@mixin circle($size) {
@include square($size);
border-radius: ($size/2) * 1px;
}
これを使う箇所では、次のようにします。
@import "variables";
@import "functions";
@import "mixins";
.btn {
@include circle(150);
padding: 10px 24px;
// border-radius: 20px;
font-size: 16px;
...この結果、次のようなボタンに変わりました。
以上で SCSS の基本的な書き方を、ざっと説明しました。
CSS はサイズが大きくなると、たちまち重複や前後関係がわかりにくくなりがちです。SCSS の親子関係や mixin を上手に使って、メンテナンスしやすいコードを維持しましょう。