Sassとは、CSSの機能を拡張した言語。
CSSを効率的に書けるようになり、変数を使ったり計算を行ったりすることまでできる。
複数のCSSファイルをまとめることもできる。
ファイル拡張子には、.sassと.scssの2種類があり書き方が異なる。
.sassの方が先発だけども、CSSの書き方との差が大きすぎて普及しなかったらしく、
現在は.scssの方が主流。
/* ネスト構造 親子関係のタグはネストさせて書くことができる。 *//* 変数 $変数名: 値; */$aaa:rgb(30,30,30);.bbb{color:$aaa;}/* パーシャル 分割したSassファイルのこと 分割したSassファイルは、「_」から始まるファイル名をつける。 */@import"reset";/* _reset.scssを読み込む *//* 定義済みの変数を呼び出し先で使うこともできる。 *//* mixin まとまったスタイルを定義することができる機能 *//* @mixin mixin名() {} で定義 *//* 引数を渡して呼び出すこともできる。 */@mixinaaa(){color:black;}.bbb{@includeaaa();}- 親参照セレクタ &
- 疑似要素 ::after等(色々定義されてる) &:afterと書くのが一般的みたい
Sassのフォルダ構成
- projects
- index.html
- style.css
- ./stylesheets/
- style.scss
- _reset.scss
- ./config/
- ./mixin/
- ./modules/
- ./vendor/
- ./override/
このような構成が一般的みたい。
BEM
CSSを記述する時の命名ルール
ページを構成する要素を、Block, Element, Modifierに分けて命名する。
Block
要素の大元になるブロック要素。命名は名詞を使用。
Element
Blockの子要素。命名は名詞を使用。
Modifier
Block,Elementに特別な修飾をする要素。命名には形容詞を使用。
命名規則
BlockとElementを繋ぐ場合は、アンダースコア2つで繋ぐ。
Modifierに繋ぐ場合は、ハイフン2つで繋ぐ。
続けて書くと、Block__Element--Modifier
HAML
HTMLよりも簡単にHTMLを書く(？)ビューテンプレートエンジン