スタイル規則

スタイル規則は、CSSと同様に、Sassの基礎です。そして、それらは同じように機能します。セレクタを使用してスタイルを設定する要素を選択し、それらの要素の外観に影響を与えるプロパティを宣言します。

プレイグラウンド

SCSS構文

.button {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #e1e4e8;
}
プレイグラウンド

Sass構文

.button
  padding: 3px 10px
  font-size: 12px
  border-radius: 3px
  border: 1px solid #e1e4e8

CSS出力

.button {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #e1e4e8;
}

ネストネスト パーマリンク

しかし、Sassはあなたの生活を楽にしたいと考えています。同じセレクタを何度も繰り返すのではなく、あるスタイル規則を別のスタイル規則の中に書くことができます。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構文

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

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;
}

⚠️ 注意！

ネストされた規則は非常に役立ちますが、実際にどれだけのCSSを生成しているかを視覚化するのが難しい場合があります。ネストが深くなるほど、CSSを提供するために必要な帯域幅が増え、ブラウザがそれをレンダリングするために必要な作業が増えます。セレクタは浅く保ちましょう！

セレクタリストセレクタリスト パーマリンク

ネストされた規則は、セレクタリスト（つまり、カンマ区切りのセレクタ）の処理に優れています。それぞれの複合セレクタ（カンマの間にあるセレクタ）は個別にネストされ、その後、セレクタリストに再び結合されます。

プレイグラウンド

SCSS構文

.alert, .warning {
  ul, p {
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 0;
  }
}
プレイグラウンド

Sass構文

.alert, .warning
  ul, p
    margin-right: 0
    margin-left: 0
    padding-bottom: 0

CSS出力

.alert ul, .alert p, .warning ul, .warning p {
  margin-right: 0;
  margin-left: 0;
  padding-bottom: 0;
}

セレクタ結合子セレクタ結合子 パーマリンク

結合子を使用するセレクタもネストできます。結合子は、外側のセレクタの末尾、内側のセレクタの先頭、または2つの間の samostatně に配置できます。

プレイグラウンド

SCSS構文

ul > {
  li {
    list-style-type: none;
  }
}

h2 {
  + p {
    border-top: 1px solid gray;
  }
}

p {
  ~ {
    span {
      opacity: 0.8;
    }
  }
}
プレイグラウンド

Sass構文

ul >
  li
    list-style-type: none



h2
  + p
    border-top: 1px solid gray



p
  ~
    span
      opacity: 0.8

CSS出力

ul > li {
  list-style-type: none;
}

h2 + p {
  border-top: 1px solid gray;
}

p ~ span {
  opacity: 0.8;
}

高度なネスト高度なネスト パーマリンク

ネストされたスタイル規則で、子孫結合子（つまり、単純なスペース）で順番に結合する以上のことをしたい場合は、Sassが対応します。詳細については、親セレクタのドキュメントを参照してください。

式展開式展開 パーマリンク

式展開を使用して、変数や関数呼び出しなどの式から値をセレクタに挿入できます。これは、ユーザーが渡すパラメータからセレクタを作成できるため、Mixinを記述する場合に特に役立ちます。

プレイグラウンド

SCSS構文

@mixin define-emoji($name, $glyph) {
  span.emoji-#{$name} {
    font-family: IconFont;
    font-variant: normal;
    font-weight: normal;
    content: $glyph;
  }
}

@include define-emoji("women-holding-hands", "👭");
プレイグラウンド

Sass構文

@mixin define-emoji($name, $glyph)
  span.emoji-#{$name}
    font-family: IconFont
    font-variant: normal
    font-weight: normal
    content: $glyph



@include define-emoji("women-holding-hands", "👭")

CSS出力

@charset "UTF-8";
span.emoji-women-holding-hands {
  font-family: IconFont;
  font-variant: normal;
  font-weight: normal;
  content: "👭";
}

💡 豆知識

Sassは、式展開が解決された後にのみセレクタを解析します。これは、解析されないことを心配することなく、式展開を使用してセレクタの任意の部分を安全に生成できることを意味します。

式展開と親セレクタ `&`、 `@at-root` ルール、およびセレクタ関数を組み合わせることで、セレクタを動的に生成する際に強力な力を発揮できます。詳細については、親セレクタのドキュメントを参照してください。