Sass: Interpolation & Nesting 🎁

In the prior post, we discussed the SSCS rules. We began with variables and demonstrated how they cannot be used as placeholders for property names, stating that interpolation was used in their place, so let's expand on the topic of interpolation.

Interpolation

sass docs said that

Interpolation can be used almost anywhere in a Sass stylesheet to embed the result of a SassScript expression into a chunk of CSS.

It allows us to insert sass expressions into a simple SASS or CSS code by using #{expression}.

Interpolation Syntax:

#{expression}

Example:

Keep in mind that we may use interpolation as a placeholder for both property names and values.

It can also be utilized as a placeholder for selectors.
Example:

Nesting rule

CSS selectors may be nested in Sass just as in HTML.

Take a look at this Sass navigation code example:

Notice that in Sass, the ul, li, and selectors are nested inside the nav selector.

While in CSS, the rules are defined one by one (not nested):

You can see that sass is more readable and cleaner than traditional CSS since it allows the nesting of properties.

Sass Nested Properties

Numerous CSS properties, such as text-align, text-transform, and text-overflow, all begin with the same prefix.

Sass allows you to write them as nested properties:

For now, that is all there is. We will discuss nesting in further detail in the following post.

See You 🧡

Comments

[ErrorGamer2000]

Cool, I've been using scss for a little while now, and didn't know about nested properties. This could be particularly useful to clean up things such as border and animation properties.

[Akram A. Abdelbasir]

That is indeed very useful. There are many layers that you can nest in, as you can see below.

.headline{
    border: {
        right: {
            color: #f92;
            style: dashed;
            width: 2px;
        }
        radius: 5px;
    }
}

CSS output will be:

.headline {
  border-right-color: #f92;
  border-right-style: dashed;
  border-right-width: 2px;
  border-radius: 5px;
}

I mentioned it as a form of completeness even if this is not the best option for readability.