2011-07-24今回は@extendについてです。別のセレクタの全てのスタイルを継承することができます。2px;}@extendに使用できるセレクタ1つの要素のみに関連するセレクタであればほとんど使用できます。要素セレクタやid/classセレクタや擬似クラス、属性セレクタなども使用できますし、各セレクタを連結させたもの(div#selectorA.selectorBやdiv.selectorA:first-childなど)も使用できます。F)は使用できません。全称セレクタ(*)も使用できますが、使う場面はなさそうですね。.selectorB;みたいに複数一括指定することはできないので分けて書きましょう。F}@extendをうまく使えば、セレクタのグループ化によってCSSのファイルサイズを減量したり、スプライト用の画像の読み込み指定をまとめてhttpリクエストを減らすこともできるのでとても便利です。気をつけなければいけないことがあります。1継承するのは@extendで指定したセレクタ自身のスタイルだけではなく、その子要素などのスタイルも継承するということです。14px;}こういう問題があるかもしれません。normal;にしてるからそのままでよかったのに...。pのテキストカラーはbodyで適用されてる色でよかったのに...。.selectorBはスタイル変える必要がないのに...。h2にも適用された...。複数人で制作していると、別のメンバーがつくったセレクタを継承してたらいつの間にか結構変わってたとかセレクタ自体が削除されてた(エラー出ないので気づかない)なんてこともあるかも。2@extendで指定したセレクタを含むセレクタも継承することです。下記のような場合、要素指定なしの.selectorAのスタイルだけを継承したいとします。ここで.selectorAを継承指定}ところが、期待通りの出力結果になりませんでした。underline;}さらに属性セレクタに関してはバグ(?)があるようです。.selectorBで属性セレクタを含んでいる.selectorAを@extendします。.selectorA;}期待する出力結果は下記になります。underline;}実際の出力結果では、意図しないセレクタが出力されます。underline;}複雑なセレクタに使うとややこしいですね。@extendを使用するルールは決めておいたほうが良いと思います。@extendの使用ルール案@extendで使用するセレクタはスタイルや要素が、ある程度固定されたものにする。おなじみのclearfixやスプライト用の指定とか。@extend専用のセレクタ(.extend-fooとか)を用意して利用する。このセレクタに対するあらゆる変更は、それを利用している他のセレクタにも影響することが分かるので、変更は注意しておこなうだろうし、変更前に影響範囲を確認するというフローをつくることもできると思います。