Sass使ってみる-その②基本構文とか-
以前の記事の続きになります。
ここではSassのルールや基本的な構文を紹介します
この記事の目次
Sassの書き方
そもそもSassには記法が2つあり、「SASS」記法と、「SCSS」記法の2種類になります。
どちらの書き方も慣れるまでは大変ですが、慣れたらとても便利に使えると思います。
「SASS」記法
Sassがもともと採用していた書き方です。
拡張子に「.sass」を付けて作ります
記述が簡素化されているため、コーディングが簡潔になります。
|
1 2 3 4 5 6 7 8 |
body background-color: #000 width: 80% margin: 0 auto p color: #fff span font-weight: bold |
SASS記法では{}や;を使わず、インデントで依存関係を示します。
「SCSS」記法
SCSSはSASSがCSSとの互換性が乏しかったために作られた記法らしいです。
拡張子に「.scss」と付けて作ります
SCSSではCSSの書き方がそのまま使えますし、書き方がCSSに近いためコーディングしやすいと思います。
|
1 2 3 4 5 6 7 8 9 10 11 |
body{ background-color: #000; width: 80%; margin: 0 auto; p{ color: #fff; span{ font-weight: bold; } } } |
SCSS記法では、括弧{}を使い入れ子構造にすることでCSSの依存関係を示します。
このページではSCSSの書き方で紹介していきますので「Sass」と出てきたらSCSSだと思ってください
コメント
Sassのファイル内で使えるコメントは2種類あります。
- //で一行コメント
- /**/で範囲でコメント
上記に種類になります。 //のコメントはコンパイル時に削除され出力されないので残しておきたいコメントは/**/の形で書き込むようにしましょう
セレクタをネストさせる
今回サンプルとして下記のHTMLコード内のheader要素内のnav部分を装飾してみます
|
1 2 3 4 5 6 7 8 9 10 11 |
<header> <nav> <ul> <li><a href="#">ナビゲーション</a></li> <li><a href="#">ナビゲーション</a></li> <li><a href="#">ナビゲーション</a></li> <li><a href="#">ナビゲーション</a></li> <li><a href="#">ナビゲーション</a></li> </ul> </nav> </header> |
まずは背景に色を付けたいのでheader要素に背景色の指定をしてみます。
|
1 2 3 |
header{ background-color: #ccc; } |
ここはまだいつものcssとおなじですね
入れ子になっているul要素に対して指定します
普通のcssではこう書きました
|
1 2 3 4 5 6 7 8 9 10 |
header{ background-color: #ccc; } header nav ul{ display: flex; justify-content: space-between; align-items: center; height: 50px; } |
今回紹介するSCSSでは入れ子の構造が取れるのでこのように記述していきます
|
1 2 3 4 5 6 7 8 9 |
header{ background-color: #ccc; nav ul{/*入れ子にするのでheaderのブロック内にセレクタを入れる*/ display: flex; justify-content: space-between; align-items: center; height: 50px; }/*nav ulの閉じ*/ }/*headerの閉じ*/ |
更にul要素の子要素のli要素に対して指定したいのでさらに入れ子にしていきます
|
1 2 3 4 5 6 7 8 9 10 11 12 |
header{ background-color: #ccc; nav ul{/*入れ子にするのでheaderのブロック内にセレクタを入れる*/ display: flex; justify-content: space-between; align-items: center; height: 50px; li{/*入れ子にするのでnav ulのブロック内にセレクタを入れる*/ width: 20%; }/*liの閉じ*/ }/*nav ulの閉じ*/ }/*headerの閉じ*/ |
最終的なコードは上のものになります。
しかしこのままではhtmlと連携できません。Koalaの場合上書き保存するとこのファイルをコンパイルしてくれて、cssファイルを出力してくれます。
「Autoprefix」にチェックを付けた場合ベンダープレフィックス付きになっているので必要な場合はとても助かる仕様になっています
コンパイル後のcssファイルは以下の通りになります
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
header { background-color: #ccc; } header nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 50px; } header nav ul li { width: 20%; } |
ここまで試したようにSassではセレクタの中でさらにセレクタを書くとネストすることができます。
プロパティのネスト
セレクタと同じようにプロパティもネストすることができます。プロパティをネストする場合は「{」の前に「:」をつけます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
div { border: { style: solid; width: 5px; color: #000; } margin: { top: 10px; right: 20px; bottom: 30px; left: 40px; } } |
このコードをコンパイルすると以下のようになります
|
1 2 3 4 5 6 7 8 9 |
div { border-style: solid; border-width: 5px; border-color: #000; margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; } |
擬似クラスの時に便利な&記号(親を参照)
例えば何かの要素に疑似クラスを使って装飾したいと思いました
そこでこんなコードを思いつきました
|
1 2 3 4 5 6 |
li{ width: 20%; :nth-child(3){ background-color: #e00; } } |
この状態でコンパイルすると以下のようなコードになります
|
1 2 3 4 5 6 |
header nav ul li { width: 20%; } header nav ul li :nth-child(3) { background-color: #e00; } |
擬似クラスの前に余計なスペースが入っています。
ネストをさせてセレクタを指定した場合、子要素に対しての指定にするための半角スペースが入ってしまいます。
モノによっては思った通りの動きになりません
SCSSで＆記号を使うと親要素を参照することができるのでこんな時に便利です
一文字増えてしまいますがこのように書いてコンパイルしてみると…
|
1 2 3 4 5 6 |
li{ width: 20%; &:nth-child(3){ background-color: #e00; } } |
キッチリと出力したい形に直すことができました
擬似クラスはよく使うものだと思いますので覚えておくと良いでしょう
|
1 2 3 4 5 6 |
header nav ul li { width: 20%; } header nav ul li:nth-child(3) { background-color: #e00; } |
変数を使うときは＄記号を頭に
Sassでは変数を使うことができます。考え方は他の言語と同じ
基本的にファイルの先頭で定義しておいて使います。使うときは、$記号の後に名前を付けてあげましょう
代入には＝ではなく「:」を使っていきます。もちろん値の後には「;」を忘れずに。
この辺りが間違えやすいところ何でしっかりと押さえていきましょう。
呼び出しはそのまま$記号から始まる変数名を書くだけになります
|
1 2 3 4 5 |
/*変数を定義して代入*/ $変数名:値; /*使用の際はそのまま変数名を書く*/ $変数名; |
一切使いまわしていませんが2つの変数を定義して使いまわすためのコードになります。 この状態でコンパイルすると
|
1 2 3 4 5 6 7 8 |
$main-color:#f00; $base-color:#ccc; body{ background-color: $base-color; header{ background-color: $main-color; } } |
このようになります
|
1 2 3 4 5 6 |
body { background-color: #ccc; } body header { background-color: #f00; } |
用途は様々で
カラーコードを入れる
サイト内で使いまわすであろうベースカラー・メインカラー・アクセントカラーなどを変数に入れておいて呼び出せるようにしておくと色の変更が入った時変数の中身だけ変えればすべてに対応できるのでとっても管理が楽になります
要素の幅を入れておく
幅の指定はよく使うものかと思います。
変更もよく生じると思うのであらかじめ変数に入れておけば一括変更ができます
ブレイクポイントを入れておく
これも変数に入れておけば少し変えたい場合変数の中身をいじるだけで済むのでとっても楽だと思います
演算（計算）もできる
大まかな計算であればSassの機能からやってしまったほうが便利そうです。 ここでは例として引き算や割り算の計算式を使ってみます
|
1 2 3 4 5 6 7 |
$container-width:100%/4; body{ width: $container-width; header{ width: 100%-30; } } |
この状態でコンパイルすると下記のようになります
|
1 2 3 4 5 6 |
body { width: 25%; } body header { width: 70%; } |
がっつりと計算式を使って指定するなら「calc」を使ったほうがよさそうですが簡単なものであればこの演算も便利なのではないでしょうか
ここまでが基本的な書き方になっています。
複雑な処理は他のページで紹介します
