SassとModernizrを組み合わせる場合の基本的な書き方メモ

みなさん、こんにちは、まーしーです
週末にようやく大英博物館に行ってきました。これが無料なんだからスゴイですね。

さて、CSSを書くときにSassを使って書くとすごく楽ですね。
例えばこんな感じで色々書いていくとします。

blockquote{
  background:#F8F7E5;
  -moz-border-image: url(../images/line-blockquote.gif) 1 repeat;
  -webkit-border-image: url(../images/line-blockquote.gif) 1 repeat;
  -o-border-image: url(../images/line-blockquote.gif) 1 repeat;
  border-image: url(../images/line-blockquote.gif) 1 repeat;
  p{
    font-weight:bold;
  }
}

対応しているブラウザはいいのですが、世の中それほどうまくは回っていないので何かしらの対応が必要になります。

CSS3まわりに対応していないブラウザの対策としてはいくつかの方法があります。
たとえばModernizrを使う場合、このスクリプトを読み込むと対応しているかを判定してclassをふってくれます。

Modernizr
http://www.modernizr.com/

border-imageに対応していない場合はno-borderimageというクラスが振られます。
例えば先ほどの例だと以下のような感じで指定します。

.no-borderimage blockquote{
  border:1px dashed #E9D97C;
}

Sassを普通につかって書いていると入れ子は簡単なのですが、親などに指定を追加するためにひとまとまりのところから外してしまうのは若干見通しが悪くなります。
（このあたりは色々な考え方があるかと思いますので、分けてしまう方がいい場合もあるでしょう）

同じ中で書いていく場合は「&」を使います。

blockquote{
  .no-borderimage &{
    border:1px dashed #E9D97C;
  }
}

このように書くことで

.no-borderimage blockquote{
  border:1px dashed #E9D97C;
}

というCSSが生成されます。

「&」については

a {
  text-decoration: none;
  &:hover { text-decoration: underline; }
}

とかくことで

a {text-decoration: none;}
a:hover{text-decoration: underline; }

というCSSができますね。
より効率的にCSSが書けそうです。

参考URL

File: SASS_REFERENCE
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#referencing_parent_selectors_