SCSS セレクターで変数を使用するにはどうすればよいですか?-CSSチュートリアル-php.cn

SCSS セレクターで変数を使用するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-11-03 04:13:03

オリジナル

965 人が閲覧しました

How Can I Use Variables in SCSS Selectors?

SCSS セレクターでの変数の使用法

SCSS では、変数を利用して動的セレクターを作成することが便利なテクニックとなります。ただし、例のようにセレクターで変数を直接使用することは、構文ではサポートされていません。

セレクターで変数を効果的に使用するには、セレクター自体内で変数をプレフィックスまたはサフィックスとして使用できます。これにより、特定のクラス名を動的に生成できます。たとえば、コードを次のように変更できます。

<code class="scss">$gutter: 10;

.grid#{$gutter} {
    background: red;
}</code>

ログイン後にコピー

この変更により、生成された CSS には、必要な背景色のクラス .grid10 が含まれます。

<code class="css">.grid10 {
    background: red;
}</code>

ログイン後にコピー

さらに、文字列内で変数を使用して、文字列補間が必要な URL やその他の要素を動的に作成できます。例:

<code class="scss">$gutter: 10;
$filename: 'sans-serif';

background: url('/ui/all/fonts/#{$filename}.woff');</code>

ログイン後にコピー

以上がSCSS セレクターで変数を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。