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

* 本ページはプロモーションが含まれています

筆者名：仁志詩馬（にししうま）

最先端のIT企業で15年以上働く現役システムエンジニア。AWS/GCP、CISSP/CCSP、FP2級/AFPなどの資格を活かし、IT、セキュリティ、資産運用、ガジェットなど、幅広いテーマで自身の知見を発信しています。

＼好きなことば／

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 入れ子構造の使い方のまとめ"

リンク