Sass のネストされたルールとプロパティ
Sass のネストされたルール
Sass では、HTML と同じ方法で CSS セレクターをネストできます。
サイトのナビゲーション用の Sass コードの例を見てみましょう。
例
SCSS 構文:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Sass では、ul、li、 とaセレクターは内部にネストされていますnavセレクタ。
CSS では、ルールは 1 つずつ定義されます (ネストされていません)。
CSS 構文:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Sass ではプロパティをネストできるため、標準の CSS よりもすっきりしていて読みやすくなっています。
Sass のネストされたプロパティ
font-family、font-size、font-weight、または text-align、text-transform、text-overflow など、多くの CSS プロパティには同じプレフィックスが付いています。
Sass を使用すると、それらをネストされたプロパティとして記述することができます。
例
SCSS 構文:
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
text: {
align: center;
transform: lowercase;
overflow: hidden;
}
Sass トランスパイラーは上記を通常の CSS に変換します。
CSS 出力:
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
text-transform: lowercase;
text-overflow: hidden;
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。