CSS への Sass 拡張 - ネスト ルール、親セレクターへの参照、属性のネスト、プレースホルダー selectors_html/css_WEB-ITnose

sass 公式ドキュメントからの翻訳: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#css_extensions

ネストされたルール (ネストされたルール)

Sass では、ある CSS スタイルを別のスタイル内にネストすることができます。内部スタイルは、外部スタイル (Fool's Wharf 注: 階層セレクターとして理解できます) のセレクター範囲内でのみ適用できます。例:

#main p {  color: #00ff00;  width: 97%;  .redbox {    background-color: #ff0000;    color: #000000;  }}

は次のようにコンパイルされます:

#main p {  color: #00ff00;  width: 97%; }  #main p .redbox {    background-color: #ff0000;    color: #000000; }

これは、親セレクターの重複を回避するのに役立ち、複雑な CSS レイアウトで複数レベルのネストされたセレクターよりもはるかに単純です。 例:

#main {  width: 97%;  p, div {    font-size: 2em;    a { font-weight: bold; }  }  pre { font-size: 3em; }}

は次のようにコンパイルされます:

#main {  width: 97%; }  #main p, #main div {    font-size: 2em; }    #main p a, #main div a {      font-weight: bold; }  #main pre {    font-size: 3em; }

親セレクターの参照: & (親セレクターの参照: &) {#parent-selector}

場合によってはこれこれは、ネストされた外側の親セレクターを直接使用する必要がある場合、たとえば、セレクターのホバー スタイルを指定したい場合や、body 要素に特定のスタイルがある場合に便利です。指定された親セレクターを明示的に挿入します。 例:

a {  font-weight: bold;  text-decoration: none;  &:hover { text-decoration: underline; }  body.firefox & { font-weight: normal; }}

は次のようにコンパイルされます:

a {  font-weight: bold;  text-decoration: none; }  a:hover {    text-decoration: underline; }  body.firefox a {    font-weight: normal; }

& は、CSS ファイルでレンダリングされた親セレクターに置き換えられます。これは、複数レベルのネストされたルールがある場合、親セレクターは & に置き換えられる前に完全に分解されることを意味します。 例:

#main {  color: black;  a {    font-weight: bold;    &:hover { color: red; }  }}

は次のようにコンパイルされます:

#main {  color: black; }  #main a {    font-weight: bold; }    #main a:hover {      color: red; }

& はセレクターの先頭に出現する必要があります (Fool's Pier 注: つまり、セレクターの最初の文字として)。ただし、その後に接尾辞を付けることができ、親選択の後ろに追加されます。 例:

#main {  color: black;  &-sidebar { border: 1px solid; }}

は次のようにコンパイルされます:

#main {  color: black; }  #main-sidebar {    border: 1px solid; }

親セレクター & がサフィックスとして使用されている場合、Sass はエラーをスローします。

ネストされたプロパティ

CSS には同じ「名前空間」に従うプロパティがいくつかあります。たとえば、font-family、font-size、font-weight はすべてスペース内のフォントにちなんで名付けられます。 。 CSS では、同じ名前空間に多数のプロパティを設定したい場合、毎回それらを出力する必要があります。 Sass はこれに対するショートカットを提供します。名前空間に一度入力し、その中にサブプロパティをネストするだけです。例:

.funky {  font: {    family: fantasy;    size: 30em;    weight: bold;  }}

は次のようにコンパイルされます:

.funky {  font-family: fantasy;  font-size: 30em;  font-weight: bold; }

名前空間は独自の属性値を持つこともできます。例:

.funky {  font: 20px/24px fantasy {    weight: bold;  }}

は次のようにコンパイルされます:

.funky {  font: 20px/24px fantasy;    font-weight: bold;}

Placeholder Selectors: %foo(Placeholder Selectors: %foo)

Sass は特別な型をサポートします セレクターは「プレースホルダーセレクター」と呼ばれます。これらは # または % に置き換えられることを除いて、クラスおよび ID セレクターと似ています。詳細については、「@extend-Only セレクター」を参照してください。

プレースホルダー セレクターを使用するルールセットは、単独で使用される場合、つまり @extend なしで使用される場合、CSS としてレンダリングされません。