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.
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
Keep in mind that we may use interpolation as a placeholder for both property names and values.
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
li, and selectors are nested inside the
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.
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:
See You 🧡