Culture27

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

  • Published:

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;
}

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