所要時間：30分
sassの超基本的な書き方を紹介します。
環境構築がまだの人はこちらの記事をお読みください。15分程度で環境構築ができます。
所要時間約15分プログラミング初心者で黒い画面の使い方が分からない、ネットで調べてもうまくできない・・・そんな方向けの記事となります。この方法なら15分足らずで環境構築ができます！ ティロこんに[…]
sassのメリット
sassの超基本の書き方
ネスト
メディアクエリのネスト
メディアクエリをsassで書いてみます。
10行目にp要素にメディアクエリを書きました。ネストを使うことでコードが読みやすくなっています。
これをcssにすると以下のようになります。
指定したセレクタのすぐ下にメディアクエリがくるので編集しやすいですね。
&を使うともっとコードが読みやすくなる
&を使うと書きやすく、読みやすいコードになります。
16行目ではhoverを&:の後に書いてネストしています。
cssにすると以下のようになります。18行目に疑似要素であるhoverが書かれていることが分かります。
他の疑似要素も同じように書くことができます。
またBEMに使われる「 __ 」や「 — 」も&で表すことができます。
プロパティのネストも可能です。
margin-bottomやborder-leftなど「 – 」があるものはネストすることができます。
sassのコメント
コメントは2種類あります。
//は1行のコメントでcssに変換すると自動で削御されます。
は複数行のコメントです。cssに変換してもそのまま残ります。
変数の使用
sassでは変数を使うことができます。例えば以下のようにbackground-colorやcolorで#323232を使用しています。
これを変数を定義して表してみます。変数は以下のように定義できます。
試しに$main-color：#323232と書いてみました。
使用できない変数名
| 例 | |
| 数字から始まっているもの | $300px: 300px; |
| @など記号から始まっているもの | $@padding: 20px; |
| 連続したハイフンから始まっているもの | $–padding: 20px; |
変数のスコープ
スコープとは定義した変数が使用できる範囲のことです。例えば以下のように{}内で定義した変数は{}外では使用することができません。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //変数のスコープ(変数を使用できる範囲) main { $main-color: #323232; background-color: $main-color; div { background-color: #fff; p { color: $main-color; //使用できる } } } footer { color: $main-color; //範囲外では変数は使用できません。 } |