Sass のネストのルールとプロパティ

Sass のネストのルールとプロパティ

Sass のネストされた CSS セレクターは、HTML のネストされたルールに似ています。

次のように、ナビゲーション バー スタイルをネストします。

Sassコード:

nav {   ul {     マージン: 0;     パディング: 0;     リストスタイル: なし;   li   {     表示: インラインブロック;   }   a {     表示: ブロック;     パディング: 6px 12px;     テキスト装飾: なし。   } }

この例では、ul、li、a セレクターはすべて nav セレクター内にネストされています。

上記のコードを次のように CSS コードに変換します。

CSSコード:

nav ul {   マージン: 0;   パディング: 0;   リストスタイル: なし; } nav li {   表示: インラインブロック; {表示: ブロックに移動します   。   パディング: 6px 12px;   テキスト装飾: なし。}












 

---

Sass のネストされたプロパティ

多くの CSS プロパティには同じプレフィックスが付いています (例: font-family、font-size と font-weight、text-align、text-transform、text-overflow)。

Sass では、ネストされたプロパティを使用してそれらを記述することができます。

Sassコード:

フォント: {   ファミリー: Helvetica、サンセリフ;   サイズ: 18px;   重量: 太字; }テキスト: {   整列: 中央;   変換: 小文字;   オーバーフロー: 非表示; }

上記のコードを次のように CSS コードに変換します。

CSSコード:

フォントファミリー: Helvetica、サンセリフ;
フォントサイズ: 18px;
フォントの太さ: 太字;

テキスト整列: 中央;
テキスト変換: 小文字;
テキストオーバーフロー: 非表示;