Sass-ディレクティブの拡張

説明

_ @ extend_ディレクティブは、セレクター間でルールと関係を共有するために使用されます。 1つのクラスで他のすべてのクラススタイルを拡張し、独自の特定のスタイルを適用することもできます。拡張の種類は次のとおりです-

Types & Description Syntax Compiled code

Extending Complex Selectors

単一の要素セレクターまたはクラスセレクターのみで構成されるセレクターを拡張できます。

h2 {
   font-size: 40px;
}

.container{
   @extend h2
}

h2, .container {
   font-size: 40px;
}

a

複数の拡張 *

1つのセレクターで複数のセレクターを拡張できます。

.style {
   font-size: 25px;
   font-style: italic;
}

h2 {
   color: #61C8E1;
}

.container {
   @extend .style;
   @extend h2
}

.style, .container {
   font-size: 25px;
   font-style: italic;
}

h2, .container {
   color: #61C8E1;
}

a

連鎖延長 *

第1セレクターは第2セレクターによって拡張され、第2セレクターは第3セレクターによって拡張されるため、これはチェーン拡張として知られています。

.style {
   font-size: 25px;
   font-style: italic;
}

h2 {
   color: #61C8E1;
   @extend .style
}

.container {
   @extend h2
}

.style, h2, .container {
   font-size: 25px;
   font-style: italic;
}

h2, .container {
   color: #61C8E1;
}

a

セレクターシーケンス*

ネストされたセレクターは、単独で_ @ extend_を使用できます。

セレクターシーケンスのマージ *

2つのシーケンスをマージします。あるシーケンスは、他のシーケンスに存在する別のシーケンスを拡張します。

.style {
   font-size: 25px;
   font-style: italic;
   color: #61C8E1;
}

h2 .container {
   @extend .style
}

.container .style a {
   font-weight: bold;
}

#id .example {
   @extend a;
}

.style, h2 .container {
   font-size: 25px;
   font-style: italic;
   color: #61C8E1;
}

.container .style a, .container .style #id
.example, #id .container .style .example {
   font-weight: bold;
}

a

@ extend-セレクターのみ *

パーセント文字（％）は、idまたはクラスのどこでも使用でき、独自のルールセットがCSSにレンダリングされないようにします。

.style a%extreme {
   font-size: 25px;
   font-style: italic;
   color: #61C8E1;
}

.container {
   @extend %extreme;
}

.style a.container {
   font-size: 25px;
   font-style: italic;
   color: #61C8E1;
}

a

！オプションのフラグ *

！optionalフラグは、_ @ extend_が新しいセレクターを作成しないようにするために使用されます。

h2.important {
   @extend .style !optional;
}

A blank compile page gets display.

a

ディレクティブの@ extend *

_ @ extend_が_ @ media_内で使用される場合、同じディレクティブブロック内に存在するセレクターのみを拡張できます。

@media print {
   .style {
      font-size: 25px;
      font-style: italic;
   }

   .container {
      @extend .style;
      color: #61C8E1;
   }
}

@media print {
   .style, .container {
      font-size: 25px;
      font-style: italic;
   }

   .container {
      color: #61C8E1;
   }
}

例

次の例は、SCSSファイルでの_ @ extend_の使用を示しています-

伸びる

<!doctype html>
   <head>
      <title>Extend Example</title>
      <link rel = "stylesheet" href = "extend.css" type = "text/css"/>
   </head>

   <body class = "container">
      <h2>Example using Extend</h2>
      <p class = "style">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
   </body>
</html>

次に、_extend.scss_ファイルを作成します。

extend.scss

.style{
   font-size: 30px;
   font-style: italic;
}

h2{
   color: #787878;
   @extend .style

}

.container{
   @extend h2
}

次のコマンドを使用して、SASSにファイルを監視し、SASSファイルが変更されるたびにCSSを更新するように指示することができます-

sass --watch C:\ruby\lib\sass\extend.scss:extend.css

次に、上記のコマンドを実行します。それは次のコードで_extend.css_ファイルを自動的に作成します-

extend.css

.style, h2, .container {
   font-size: 30px;
   font-style: italic;
}

h2, .container {
   color: #787878;
}

出力

上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-

上記のHTMLコードを extendl ファイルに保存します。
このHTMLファイルをブラウザで開くと、次のように出力が表示されます。

Sassルールとディレクティブ

Sass-directives-extend

目次

Sass-ディレクティブの拡張

説明

例

伸びる

extend.scss

extend.css

出力