Sass also has a concept of placeholders, which can be used to dynamically assign selectors based on variable values. We can combine placeholders, and another Sass feature known as loops, together to save us from a lot of repetition in CSS. For example, we may want to define six different sizes of header elements, ranging from h1 through h6. We could manually define each of these values in our style sheet, but we could also use loops and placeholder variables to do the same thing with less boilerplate, as follows:

$title-font-size: 48px;

@for $i from 1 through 6 {
  h#{$i} {
    font-size: $title-font-size - ($i * 5);
  }
}

Here, we define our header selector with the h#{$i} placeholder. This may appear very strange at first, but it's simply a normal header element selector (h) appended to the placeholder helper (#{}). Similar to a templated property in Angular, any property that we provide to the placeholder will be resolved to its value. So, in this case, the local variable--$i--in our loop will always be a number in the sequence from 1 to 6, so our selector will be resolved as h1 through h6.

The font-size part of this header styling relies on the ability to execute basic mathematical operations inside our Sass files. In this case, we are starting from a default title font-size of 48 px, and then reducing this number by a 5 px for every loop of our header loop (including the first one). This sort of dynamically generated styling is a big part of what makes Sass a very powerful toolkit for modern web application design.