[CSS]Sassの[class^=””]ってなに？

2021-02-19

Sass(SCSS)のコードを見ていると、[class^=””] という記述がありますよね。

これ、けっこう便利な機能でDRYにCSSを書くことができます。

Sassの[class^=””]の使い方についてサクッと紹介します。

Sassの[class^=””]とは？

簡単に言うとその名称に一致するクラスに対してスタイルを指定することができます。

例えば、[class^=”text”]とあれば、前方でtextと書かれたクラス全てに対してスタイルを適用することができます。

ちょっと分かりづらいですね。実際のコードを見てみます。

ここでは、[class^=”te”]と記述していますが、勘の良い方は前方一致と気づいたのではないでしょうか？

つまり、class^と記述すれば前方一致したクラス名に指定したスタイルを反映させることができます。ここではフォントカラーの赤をteと先頭に付くクラスに反映しています。

そして、前方一致以外にも後方一致と全部一致もあります。

後方一致で指定するには、[class$=””]と記述します。さっそく見ていきましょう。

実際の現場ではこんなクラス名は利用しませんが、サンプルということで。

textクラスの最後の部分で一致した場合にスタイルを適用しています。

[class$=”te”]のスタイルが適用されていないのは、後方にteと一致するクラスがないためですね。

全部一致というか、その単語が入っているクラス全てにスタイルを適用させる場合には[class*=””]と記述します。

“”内に記述された単語がどこかでヒットしていれば、そのスタイルが全て反映されます。