Getting ready

You can test variable interpolation in Sass with the Ruby Sass compiler. The Installing Sass for command line usage recipe of Chapter 1, Getting Started with Sass, describes how to install Ruby Sass on your system.

How to do it...

Perform the steps beneath to learn how to use variable interpolation in Sass to dynamically create property and selector names:

How it works...

In Sass, you can use string interpolation by using the #{} interpolation syntax. The syntax enables you to use SassScript variables in selectors' and property names and values.

SassScript supports quoted and unquoted strings. In SassScript, quoted strings are compiled into quoted strings. But when you're using quoted strings for interpolation, the value is unquoted first. Consider the following SCSS code:

// scss-lint:disable PropertySortOrder, PropertySpelling 
$value1: unquoted; 
$value2: 'quoted'; 

test { 
  p1: $value1; 
  p2: $value2; 
  p3: $value1 #{$value2}; 
  p4: $value1#{$value2}; 
  p5: $value1 + #{$value2}; 
  p6: $value1 + $value2; 
  p7: $value1 $value2; 
}

The preceding Sass code compiles into CSS code as follows:

test { 
  p1: unquoted; 
  p2: "quoted"; 
  p3: unquoted quoted; 
  p4: unquotedquoted; 
  p5: unquoted + quoted; 
  p6: unquotedquoted; 
  p7: unquoted "quoted"; } 

In the preceding CSS code, you can see that the quotes are removed from the $value2 variable for the p3, p4, and p5 properties when applying string interpolation with the #{} interpolation syntax. For the p5 property, the + operator has not been applied, while the p6 and p7 properties will show how the strings are concatenated, as described in the Applying operations in Sass recipe of this chapter.

There's more...

Other use cases of variable interpolation can be found elsewhere in this book too. In the Commenting your code in the SCSS syntax recipe of Chapter 2, Debugging Your Code, you can read how to use variable interpolation to generate copyright notices in your CSS code. The Applying operations in Sass recipe of this chapter describes why you should use variable interpolation when using the calc() CSS function in your code.

Variable interpolation can also be used inside mixins and functions to dynamically compile a list of selectors or values. You can read more about mixins in the Leveraging mixins and Writing mixins with arguments recipes of this chapter.