Sassで親セレクターを参照する

投稿日: 2022-04-20 2022-04-20

に加えて単純な入れ子 Sassでは、を使用して親セレクターを参照することもできます＆キャラクター：

.main a {
  background-color: rgba(236,198,48,0.2);
  transition: background-color .2s ease-out;

  &:hover {
    background-color: rgba(236,198,48,0.8);
  }
}

上記をCSSにコンパイルすると、次のようになります。

.main a {
  background-color: rgba(236, 198, 48, 0.2);
  transition: background-color .2s ease-out;
}
.main a:hover {
  background-color: rgba(236, 198, 48, 0.8);
}

yaの別の例を次に示します。

button {
  background-color: blue;

  &.success {
    background-color: green;
  }

  &.warning {
    background-color: yellow;
  }
}

これにより、次のようになります。

button {
  background-color: blue;
}
button.success {
  background-color: green;
}
button.warning {
  background-color: yellow;
}

getdocs

13036