ホームページ >ウェブフロントエンド >htmlチュートリアル >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; }
場合によってはこれこれは、ネストされた外側の親セレクターを直接使用する必要がある場合、たとえば、セレクターのホバー スタイルを指定したい場合や、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;}
Sass は特別な型をサポートします セレクターは「プレースホルダーセレクター」と呼ばれます。これらは # または % に置き換えられることを除いて、クラスおよび ID セレクターと似ています。詳細については、「@extend-Only セレクター」を参照してください。
プレースホルダー セレクターを使用するルールセットは、単独で使用される場合、つまり @extend なしで使用される場合、CSS としてレンダリングされません。