Sass-nested-properties
提供:Dev Guides
Sass-ネストされたプロパティ
説明
ネストされたプロパティを使用すると、CSSを何度も書き換えることを回避できます。 たとえば、_font_を名前空間として使用します。_font_は、font-family、font-size、font-weight、font-variantなどのプロパティを使用します。 通常のCSSでは、名前空間を使用して毎回これらのプロパティを記述する必要があります。 SASSを使用すると、名前空間を1回だけ記述することでプロパティをネストできます。
例
次の例では、SCSSファイル内のネストされたプロパティの使用について説明します-
次に、ファイル_style.scss_を作成します。
style.scss
次のコマンドを使用して、SASSにファイルを監視し、SASSファイルが変更されるたびにCSSを更新するように指示することができます-
次に、上記のコマンドを実行します。それは次のコードで自動的に_style.css_ファイルを作成します-
style.css
出力
上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-
- 上記のHTMLコードを nested_propertiesl ファイルに保存します。
- このHTMLファイルをブラウザで開くと、次のように出力が表示されます。