【基礎編】Sass（サス）の使い方：入れ子構造をまず覚えよう

Sass（サス）とはCSSをより便利かつ効率的に書くことができる言語です。

Sass には SASS 記法と SCSS 記法の2種類の書き方があります。

主流は SCSS 記法。

ファイル拡張子も「.css」ではなく「.scss」になります。

Sassを使うと

というメリットがあります。

Webサイト構築が簡単になり、個人サイトから大規模開発まで応用も利きます。

本記事では Sass の特徴的な「入れ子構造」について解説します。

Sassの入れ子構造

"Sassの入れ子構造"

Sass では、CSS において繰り返しセレクタを書かなければ行けなかったところを「入れ子構造」とすることで省略する記述方法が特徴的です。

Sassの中でも一番特徴的なのが「入れ子構造」。

入れ子構造を使うと1つのセレクタの中に別のセレクタを入れ子にして指定することができます。

これにより、同じセレクタを何度も書かなくて良いことになります。

通常のCSS：「.header ul」と各

.header{
    width: 100%
}
.header ul{
    padding: 10px
}

Sass：「ul」を .header の中に書けば良い

.header{
    width: 100%
    ul{
        padding: 10px
    }
}

「li」セレクタに hover を付与する時は「li:hover」とセレクタをつけて記述する必要がある。

Sass（SCSS記法）では、セレクタを入れ子にした場合は「＆」で継承できる。

なので「li:hover」を「&:hover」と記述しても Result は同じくなる。

"Sass 入れ子構造の使い方のまとめ"

リンク