プログラマとプロマネのあいだ

プログラマもやるし、プロマネもやるし、たまに似非アーキとか営業っぽいこともやる

Sass Tutorial - 2: Parent References

概要

原文

What about pseudoclasses, like :hover? There isn't a space between them and their parent selector, but it’s still possible to nest them. You just need to use the Sass special character &. In a selector, & will be replaced verbatim with the parent selector.

超意訳

:hoverのような擬似クラスについてはどうでしょう? 擬似クラスと親セレクタの間にはスペースがありません。しかし、それらをネストすることは可能です。Sassの特殊文字である'&'を使う必要があります。セレクタの中で、'&'は親セレクタに逐語的に置換されます。

逐語的って、、逐次みたいに訳した方がしっくりくる??

サンプル

scssファイル
/* style.scss */

a {
  color: #ce4dd6;
  &:hover { color: #ffb3ff; }
  &:visited { color: #c458cb; }
}
cssファイル (sassコマンドにより自動生成)
/* style.scss */
a {
  color: #ce4dd6; }
  a:hover {
    color: #ffb3ff; }
  a:visited {
    color: #c458cb; }

'&'が'a'に置換されたわけですね。わかります。
ただ、一文字だったら、繰り返し書いても、それほど手間じゃないような。。
にしても、:hoverとか、:visitedなんていう、擬似クラス(っていうのも初めて知ったが)があるんですね。
CSSの勉強にもなるわ。


本題と逸れますが、

  • まだ訪れていないサイト(履歴に無いサイトとイコール?)のリンクは、#ce4dd6
  • リンクにマウスを乗せると、#ffb3ff
  • もう訪れてしまったサイトのリンクは、#c458cb

でそれぞれリンクの文字色が変わります。


ですが、visitedなリンクに対してhoverしても、色が変わりません。。なんで?


実は重要!スタイルシートの記述順! - [ホームページ作成] All About
を見たら、記述順で影響あるとか。。
で、visitedとhoverを入れ替えてみた。

scssファイル
/* style.scss */

a {
  color: #ce4dd6;
  &:visited { color: #c458cb; }
  &:hover { color: #ffb3ff; }
}
cssファイル (sassコマンドにより自動生成)
/* style.scss */
a {
  color: #ce4dd6; }
  a:visited {
    color: #c458cb; }
  a:hover {
    color: #ffb3ff; }

無事、visitedなリンクに対してhoverしても、色が変わるようになりました。
まあ、色が変わらなかったのは、意図的かも知れませんけどね。



< Sass Tutorial - 1: Nesting | Sassの記事一覧 | Sass Tutorial - 3: Variables >