How Can I Use Variables in SCSS Selectors?

Variable Usage in SCSS Selectors

In SCSS, leveraging variables for creating dynamic selectors can be a useful technique. However, using variables directly in selectors, such as in your example, is not supported by the syntax.

To effectively employ variables in selectors, you can use them as prefixes or suffixes within the selector itself. This allows you to dynamically generate specific class names. For instance, you can modify your code as follows:

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

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

With this modification, the generated CSS will include a class .grid10 with the desired background color:

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

Additionally, you can use variables within strings to dynamically create URLs or other elements that require string interpolation. For example:

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

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

The above is the detailed content of How Can I Use Variables in SCSS Selectors?. For more information, please follow other related articles on the PHP Chinese website!