Sass-プレースホルダーセレクター

説明

SASSは、class_または_id_セレクターを使用して_placeholder selector_をサポートします。通常のCSSでは、これらは「＃」または「。」で指定されますが、SASSでは「％」に置き換えられます。プレースホルダーセレクターを使用するには、 @ extend_ディレクティブで使用できます。 _ @ extend_ディレクティブを使用しないと、CSSで結果を表示できません。

例

次の例は、SCSSファイルでのプレースホルダーセレクターの使用を示しています-

<html>
   <head>
      <title>Placeholder Selectors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
      <link rel = "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>

   <body>
      <h1>First Heading</h1>
      <p class = "frst_para">It is a CSS pre-processor which helps to reduce repetition with CSS and save the time. </p>
      <h1>Second Heading</h1>
      <p class = "sec_para">It was initially designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006.</p>
   </body>
</html>

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

style.scss

.frst_para {
   color: green;
}
.sec_para {
   @extend .frst_para;
   font-size:20px;
}

ここでは、あるセレクターが別のセレクターのスタイルを継承できるようにする @ extend ディレクティブを使用しました。次のコマンドを使用して、SASSにファイルを監視し、Sassファイルが変更されるたびにCSSを更新するよう指示することができます-

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

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

style.css

.frst_para, .sec_para {
   color: green;
}
.sec_para {
   font-size: 20px;
}

出力

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

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

Sass CSS拡張機能

Sass-placeholder-selectors

Sass-プレースホルダーセレクター

説明

例

style.scss

style.css

出力

目次