CSS クラスをネストできるようになりましたか?

CSS クラスのネスト: 可能になりました

以前の CSS バージョンでは、クラスをネストするというアイデアはとらえどころがありませんでした。開発者は、同様の効果を達成するために、より複雑な技術に頼る必要がありました。しかし、CSS ネスト モジュールによって新たな可能性が開かれました。

CSS クラスをネストできますか?

答えは、はっきりと「はい」です。 CSS ネスト モジュールを使用すると、次の構文を使用できます:

.class1 {
  some stuff;
}

.class2 {
  .class1;
  some more stuff;
}

この構文を使用すると、クラスをネストして階層構造を作成できます。

サンプル実装

CSS の威力を示す例をいくつか示します。ネスト:

table.colortable {
  & td {
    text-align: center;
    &.c { text-transform: uppercase }
    &:first-child, &:first-child + td { border: 1px solid black }
  }

  & th {
    text-align: center;
    background: black;
    color: white;
  }
}

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}

CSS ネストを使用すると、より簡潔で保守しやすいスタイルシートを作成できるようになりました。それが提供する柔軟性とセマンティック構造の向上をお楽しみください。

以上がCSS クラスをネストできるようになりましたか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。