This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Akram A. Abdelbasir
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 🧡
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Akram A. Abdelbasir
Akram A. Abdelbasir | Sciencx (2022-09-24T16:14:54+00:00) Sass: Interpolation & Nesting. Retrieved from https://www.scien.cx/2022/09/24/sass-interpolation-nesting/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.