Sassにセレクターをネストする

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

Sassを使用すると、セレクターを簡単にネストして、ルールを階層的に整理できます。

.main {
  background-color: antiquewhite;
  margin: 0 auto;

  img {
    max-width: 100%;
    transform: rotate(3deg);
  }
  p:first-child {
    font-size: 1.2em;
span {
  background-color: burlywood;
  padding: 0.2em 0.4em;
}

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

.main {
  background-color: antiquewhite;
  margin: 0 auto;
}
.main img {
  max-width: 100%;
  transform: rotate(3deg);
}
.main p:first-child {
  font-size: 1.2em;
}
.main p:first-child span {
  background-color: burlywood;
  padding: 0.2em 0.4em;
}

同じ名前空間のプロパティ

同じ名前空間にあるプロパティをネストすることもできます。たとえば、背景プロパティはこのようにネストできます。例では、backgroundキーワードの後にコロンが使用されていることに注意してください。

.main {
  margin: 0 auto;

これにより、次のCSSが生成されます。

.main {
  margin: 0 auto;
  background-color: antiquewhite;
  background-image: url(images/gator.svg);
  background-repeat: repeat-x;
  background-size: 36px 48px;
}

👉過剰なネストは厄介なCSSを作成する可能性があるため、最大で数レベルの深さに保ちます。

getdocs

13036