コメントとネスト

1565 ワード
scss テキストリンク

今回のリリースでは、SCSSのコメントとオーバーラップについて説明します.

コメント


CSS注釈は/* ... */である.
Sass(SCSS)は、JavaScriptなどの2つのスタイルのコメントを使用します.
// 컴파일되지 않는 주석
/* 컴파일되는 주석 */
Sassでは、コンパイルされた複数行の注釈を使用する場合、各行の前に*を付けなければなりません.*行を揃えることが重要です.
/* 컴파일되는
 * 여러 줄
 * 주석 */

// Error
/* 컴파일되는
* 여러 줄
    * 주석 */
1行あたり*がなくてもSCSSは問題ありません.これにより、既存のCSSとの互換性がより容易になります.
/*
컴파일되는
여러 줄
주석
*/
ただし、コメントの使用状況によっては、以下のように異なる結果が得られることに注意してください.

ネスト


SCSSではネスト機能を使用できます.これにより、親選択者の重複を回避し、複雑な構造をより容易に作成できます.

上記の画像の重ね合わせでは、&キーワードが親セレクタに置き換えられる.これにより、下図のように簡単にCSSネストを実装できます.

@at-root(重複しない)


ネストから離れる場合は、@at-rootのキーワードを使用してネストで作成できますが、ネスト以外で使用する場合に便利です.

ネストされたプロパティ


同じ名前空間を持つ属性は、次のように使用できます.

複数選択プログラム


ネストされた複数の選択者を同時に制御できます.
JAVA Primitive Type
プログラマー内(javascript)、変数宣言、学習護衛