Sass(Scss) Memo: 親セレクタの参照

Published:2011-06-26

Sass(Scss)について覚えたことを少しずつ書いていきたいと思います。

今回は親セレクタの参照についてです。
Sassでは & を使って親セレクタを参照することができます。

Scss

div {
    a {
        text-decoration: none;

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

こうするとCSSは下記のように出力されます。

CSS

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

& が div a に置換されています。
親セレクタを繰り返し記述しなくても良いので便利です。

ただ、隣接セレクタを使うときにはちょっと不便です。
例えば、下記のようなCSSをScss記法に書き換える場合。

CSS

div h1 {
  font-size: 20px;
}
div ul {
  margin: 2em 0;
}
div h1 + ul {
  margin-top: 1em;
}

Scssで下記のように記述した時、h1 + & は div h1 + ul となって欲しいところです。

Scss

div {
    h1 {
        font-size: 20px;
    }
    ul {
        margin: 2em 0;

        h1 + & {
            margin-top: 1em; // override
        }
    }
}

ですが、& は親セレクタの div ul に置換されますので、実際には h1 + div ul と出力されてしまいます。

CSS

div h1 {
  font-size: 20px;
}
div ul {
  margin: 2em 0;
}
h1 + div ul {
  margin-top: 1em;
}

& を使いたい場合は、下記のように記述するとうまくいきます。

Scss

div {
    h1 {
        font-size: 20px;

        & + ul {
            margin-top: 1em; // override
        }
    }
    ul {
        margin: 2em 0;
    }
}

CSS

div h1 {
  font-size: 20px;
}
div h1 + ul {
  margin-top: 1em;
}
div ul {
  margin: 2em 0;
}

ただ、スタイルの上書きは後に書くことが多いので少し違和感があるかもしれません。
その場合、若干冗長ですが下記のように記述するといいと思います。

Scss

div {
    h1 {
        font-size: 20px;
    }
    ul {
        margin: 2em 0;
    }
    h1 + ul {
        margin-top: 1em; // override
    }
}

CSS

div h1 {
  font-size: 20px;
}
div ul {
  margin: 2em 0;
}
div h1 + ul {
  margin-top: 1em;
}

どちらかお好きなほうでどうぞ。