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 ＞