DEV Community

Cover image for Sass: Interpolation & Nesting ๐ŸŽ
Akram A. Abdelbasir
Akram A. Abdelbasir

Posted on • Updated on

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}
Enter fullscreen mode Exit fullscreen mode

Example:

Interpolation Syntax

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:
Interpolation Syntax Example No. 2

Nesting rule

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

Take a look at this Sass navigation code example:

Nesting rule

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:

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

See You ๐Ÿงก

Top comments (2)

Collapse
 
errorgamer2000 profile image
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.

Collapse
 
ak_ram profile image
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;
    }
}
Enter fullscreen mode Exit fullscreen mode

CSS output will be:

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

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