SASS | Style Rules
Just like CSS, style rules are also the base of SASS. It is used similar to CSS. Select the elements to be styled using a selector and then declare it’s properties which further affects the look of those elements.
Example:
Sass Code:
.header padding : 3px 10px font-size : 40px font-family : sans-serif border : 2px solid green |
This would result in the following CSS output:
.header{ padding: 3px 10px; font-size: 40px; font-family: sans-serif; border: 2px solid green; }
But, the advantage as it is merely just repeating itself. SASS wishes to make your code easy, not just repeat itself. So, in SASS, you may avoid repeating the same selector again and again. You can easily write one style rule inside the other. SASS automatically do your desired job. This feature of SASS is known as nesting.
Example: Sass Code
navbar ul padding : 2px list-style : square li display : inline- block a display : block padding : 4px 10px font-family : sans-serif |
This would result in the following CSS output:
navbar ul{ padding: 2px; list-style: square; } navbar li{ display: inline-block; } navbar a{ display: block; padding: 4px 10px; font-family: sans-serif; }
Nesting rules are quite useful, but sometimes they can create a large amount of CSS. The more you nest, the more bandwidth it takes to generate CSS, and the more work will be done by your browse to render it. Hence the selectors must be kept shallow.
Some more useful examples: Nested rules are quite useful for handling the selector lists. Selector lists refer to the list of selectors separated with commas. These are compiled as the following example:
SASS Code:
.abc, .def ul, p padding : 2px font-family : sans-serif border : 1px |
This would result in the following CSS output:
.abc ul, .abc p, .def ul, .def p { padding: 2px; font-family: sans-serif; border: 1px }
Interpolation: In order to insert values like variables and functions into the selectors, you can use interpolation. Interpolation is very useful while creating mixins as it allows you to generate selectors from the parameters your users have provided.
Example: Sass Code
@mixin full-form($name, $glyph) span.full-form-#{$name} font-family : sans-serif padding : 4px border : 10px content : $glyph @include full-form( "GFG" , "w3wiki" ) |
This would result in the following CSS output:
span.full-form-GFG { font-family: sans-serif; padding: 4px; border: 10px; content: "w3wiki"; }
Sass only analyses selectors after interpolation is completely resolved, meaning you are safe to use interpolation for generating any part of the selector without worrying that it won’t work.