MEAN Cookbook

There's more...

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 ...