▼ 設計手法について
設計手法については幾つかあるらしいですが,なんとなく主流は BEM と呼ばれるものらしい.
BEM
3つの要素を元に名前を設定する.
Block, Element, Modifier
Block__Element–Modifier
Block–Modifier
▼ Sass の表記
div タグの class 属性などは以下のように記述する.
class | セレクタの始まりを「.」にする |
id | セレクタの始まりを「#」にする |
▼ Sass 主な機能
& 親参照
以下の html と main.scss をビルドすると添付のような文字色で表示される.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./dist/css/main.css"> <title>Document</title> </head> <body> <p>赤い文字</p> <p class="green">緑文字</p> <p><span class="blue">青い文字</span></p> </body> </html> |
1 2 3 4 5 6 7 8 9 | /* main.scss */ p { color: red; &.green { color: green; } .blue { color: blue; } |
▼ mixin
@mixin で定義して,@include で適用する.
▼ インターポレーション(#{})
変数の参照
参考:
今更ながらBEMについてと、それに対応するSassについてまとめてみる
BEMをSassで快適に書く方法
▼ sass と scss の違いは?
記法のことを指していることが多く,scss 記法が CSS に近いルールで記述できる.
主流はこちらになっている.