Sassの記述を覚えてCSSを効率的に書くための基本的メモ

みなさん、こんにちは、まーしーです。
英会話学校の友人が話す言葉が聞き取れなくて、向こうがあきらめモードになるたびにへこむ日々です。  

さて、先日「SassとDreamweaverのコードヒントでCSSをさらに効率的に」というのを書いて、Sassを使っています。
がっつり使う機会がなかなか無かったのですが、使う度にその便利さに感動しています。

変数（$）と演算

まず基本は変数。

$blue: #3bbfce;
$margin: 16px;

という記述を先にしておけば色やmarginの指定の際に変数の値を利用することができます。

.hoge{
  color:$blue;
  margin:$margin;
}

と書けば

.hoge{
color:#3bbfc3;
margin:16px;
}

となります。
fontサイズの%とかを指定しておくと良さそうな気がします。

続いて演算。演算はまだつかうことがないのですが。

.hoge{
  margin:$margin / 2;
}

とかくと

.hoge{
margin:8px;
}

と計算してくれます。
fontサイズも変数にいれないで、基準値の値で割って計算、ということも可能ですね。
（切り捨てるかどうかとかがあるので、この辺は検証が必要なのかも？）  

ネスト

CSSを入れ子で記述していくことができます。

#box{
  margin:10px;
  .text{
    font-weight:bold;
  }
}

と書くと

#box{
margin:10px;
}
#box .text{
font-weight:bold;
}

となります。
最初の入れ子が見にくい、というのがありますが、見通しよく書くことができそうです。

組み合わせ（@mixin , @include）

変数の拡大版に近いかんじですが、プロパティをまとめて読み込めてしまえます。

@mixin moduleText{
  color:#441A00;
  font-size:$f16;
  font-weight:bold;
}

みたいな感じで書いた上で

h2{
  @include moduleText;
  margin-bottom:20px;
}

と書くとこんなかんじで出力されます。

h2{
color:#441A00;
font-size:$f16;
font-weight:bold;
margin-bottom:20px;
}

共通要素が多い場合などは記述が早くなりますね。
@include hoge;
というのを忘れないようにしないとです。

セレクタの再利用（@extend）

再利用、という日本語が正しいかどうかは少々疑問ですが。

.error {
  border: 1px #f00;
  background: #fdd;
}

という記述を先にしておいた上で

.badError {
  @extend .error;
  border-width: 3px;
}

と書くことで、.badErrorでも.errorに指定した物をそのまま利用できます。
これはclearfixとかで使いやすい感じになりますね。

.badError {
border: 1px #f00;
background: #fdd;
border-width: 3px;
}

となるのではなく

.error,.badError {
border: 1px #f00;
background: #fdd;
}

.badError {
border-width: 3px;
}

となります。

ということで

ということで、Sassを使えばほんと効率的にCSSが書けますね。
.scssファイルをDWで修正していると、.cssが変更されました、的なアラートが何度も出るのがちょっと気になるところではありますね。。

まぁ、便利ではあるけれども組み合わせて使ったりすると複雑になったりもするので、少し慣れも必要なのかな？とも思います。

Sassについては年明けのイベントで小久保さんが話すようですね。

CPI x CSS Nite「After Dark」（1）
http://cssnite.jp/afterdark/cpi/vol01/

この内容も気になるところです。ustもあるので楽しみですね。