応用カリキュラム Sass と Haml

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名() {} で定義 */
/* 引数を渡して呼び出すこともできる。 */
@mixin aaa() {
  color: black;
}
.bbb {
  @include aaa();
}

• 親参照セレクタ &
• 疑似要素 ::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を書く(？)ビューテンプレートエンジン