SASSの自分的解釈

SASSについて人に教えることになったので自分なりのまとめ。

CSSについてはある程度理解の前提での話です。あと使用エディタはDreamweaver。

SASSとは

ざっくり言うと「まどろっこしい記述になるCSSを効率的に書こう」という発想から生まれた言語。最後はコンパイルしてCSSにする必要がある。

Syntactically Awesome StyleSheetの略で、

Syntactically = 構文的に
Awesome =  イケてる
StyleSheet = スタイルシート

だそうな。

このSASS、「SASS」記法と「SCSS」記法の2種類あって、前者はとてもシンプルになるけどCSSっぽくない、後者はSASSほどシンプルではないけどCSSっぽいしなんならCSSとの互換性がある

現状SCSSが主流なので以降SCSS記法のみの話になります。

SCSSの具体例

.outer{
	text-align: center;
}
.outer .inner{
	display: inline-block;
	text-align: left;
}

これが

.outer{
	text-align: center;
	.inner{
		display: inline-block;
		text-align: left;
	}
}

こうなります。

所謂入れ子(ネスト)ってやつです。&を使って

.outer{
	text-align: center;
}
.outer > .inner{
	display: inline-block;
	text-align: left;
}
.outer{
	text-align: center;
	& > .inner{
		display: inline-block;
		text-align: left;
	}
}

&は入れ子の親を表します。だから::beforeとかも同様に入れ子で書くことができます。ラクチン。

こうして書いたscssファイルを最終的にはコンパイルするわけなんですが、このままではコメントアウトに日本語を入れられません。

なので@charset "utf-8";を頭に入れる。

あと便利機能として定数?の宣言ができます。

$black: #222;
p{
	color: $black;
}

こうすることで同じ色を使いまわしている部分は一括で書き換えられます。

Dreamweaverでは(多分他のエディタでもできるとは思うんですが)コンパイル時にCSSの形状を変えることができます。比較的見やすい状態にしたり完全に圧縮したりコメントアウトの有無など。ただ何故か編集中のソースコードの整形ができません。ググっても特に情報が落ちてなくて…。