CSSの次はSassを使って爆速コーディングをしよう
CND Okawa
Sassとは？
Sassは「Syntactically Awesome StyleSheet」の略で
Syntactically ＝ 構文的に
Awesome ＝ 素晴らしい
StyleSheet ＝ スタイルシート
「CSSをより効率よく組むことが出来るよ！」といったものです。
記述方法はSASSとSCSSの2種類があり、SASS記法が先に作られ、後に作成された記法がSCSSになります。
なので弊社ではSCSSを採用しています。
SASSとSCSSとの違いとは？
作られたSassファイルの拡張子が.sassと.scssで違いがあります。
一番違いが感じられるのはSassの書き方です。
SASS記法
.sample
p
color: #000
.pick
color: #fff
SASS記法はセレクタやクラスの後に{ }を使わず、また値の後の;を省略します。
SCSS記法
.sample {
p{
color: #000;
.pick {
color: #fff;
}
}
}
SCSS記法はネスト（入れ子）を主とした記法で、スタイルの書き方はCSSとさほど変わりません。
SCSSで出来ること
ネスト（入れ子）で書ける
Sassでネストしコンパイルすると、CSSでは下記のように変換されます。
クラス名の変更などがあったとき一カ所のみの修正でOKです。
コンパイル前
.sample {
p{
color: #000;
.pick {
color: #fff;
}
}
}
コンパイル後
.sample p {
color: #000;
}
.sample p .pick {
color: #fff;
}
変数が使える
「$〇〇」といったように変数を設定することが出来ます。
良く使う色をあらかじめ設定しておくなど、色々な場面で役に立ちます。
色変更があった場合も、変数のカラーを変更するだけでOKです。
コンパイル前
$black:#000;
$white:#fff;
.sample {
p{
color: $black;
.pick {
color: $white;
}
}
}
コンパイル後
.sample p {
color: #000;
}
.sample p .pick {
color: #fff;
}
@mixin
特定のスタイルを定義できるので、良く使うコードなど独自のテンプレートを作成することが出来ます。
先ほどの変数とも合わせて使えます。@includeで呼び出します。
コンパイル前
$black:#000;
$white:#fff;
@mixin textColor {
color: $black;
span{
color: $white;
}
}
.aaa {
p{
@include textColor;
}
}
.bbb {
p{
@include textColor;
}
}
コンパイル後
.aaa p {
color: #000;
}
.aaa p span {
color: #fff;
}
.bbb p {
color: #000;
}
.bbb p span {
color: #fff;
}
コメントアウト
「/**/」はコンパイル後のCSSにも記述が残りますが「//」で始まるコメントアウトはコンパイル後のCSSには残りません。
コンパイル前
//文字色
/*文字色*/
p {
color: #000;
.pick {
color: #fff;
}
}
コンパイル後
/*文字色*/
p {
color: #000;
}
p .pick {
color: #fff;
}
その他にもセレクタの使い回しが出来るextend、演算、ifなど、CSSでは出来なかったことがSassでは出来るようになります！
デメリットとしては、Sassで記述した内容をCSSにコンパイルする必要があるので、そのための環境準備までに手間がかかります。
SassをリアルタイムでCSSにコンパイル出来るWEBサービスもあるので、導入前にここで実際に試してみるのもおすすめです！
https://www.sassmeister.com/
コーダーあるある
「ヘッターとフッダーにGoogleのタグ入れてください！」
「違いますよー！ヘッダーとフッターです。」
「【head（頭）er】【foot（足）er】とすると分かりやすいですよー！」
「ほぉ！なるほど…」
…とわかんなくなる事が、よくある。
