Compass note

未踏の地へ踏み出すコンパス的エンジニアノート

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

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

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

主流は SCSS 記法。

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

Sassを使うと

  • CSS より記述量を減らせる
  • コードを再利用できる
  • リスト3

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

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

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

Sassの入れ子構造

"Sassの入れ子構造"

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

Sass の入れ子構造はセレクタを何度も書かなくてよい

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

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

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

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

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

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

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

Sass入れ子の具体例

CSS では「li:hover」と記述する

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

Sass(SCSS記法) では「&:hover」と記述する

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

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

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

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

  • 入れ子構造にすることでセレクタの繰り返し記述が不要
  • コード量削減、可読性が向上する

    Amazonチャージ