Next in comes nesting. Just like the HTML hierarchy being written one inside the other, we can nest classes one inside the other which was not possible with normal css. The task of unwinding the nested hierarchy and creating the suitable classes is taken up by the compiler. Below is a live playground. Drag and re-size the handles to check out the sass code, the HTML and the compiled css that it generates. Copy paste the same to your favorite text editor if you would like to see them more clearly as well.
The above embed is a live playground. Note the HTML and the scss. Both follow the same hierarchy.
Thats nesting for you! But beware of the nesting hell. Its not adviceable to nest more than 4 levels deeper as the specificity will becomes too much at one point of time.
In the sass section of the code, notice on Line 29, where we have again nested properties that share the same namespace, ie name. ( font-weight, font-size etc shares the namespace of "font")
The same is unwinded accordingly and check the middle column of css to see how the output is turned out. As far as possible, look for opportunities where in we can isolate a piece of code, convert to a mixin or placeholder and reuse them in the maximum places rather than writing 10 level deep nesting thereby making the css really scary and tangled. Always KISS :).. ( Keep It simple Silly! )
The above embed is a live playground. Note the HTML and the scss. Both follow the same hierarchy.
Thats nesting for you! But beware of the nesting hell. Its not adviceable to nest more than 4 levels deeper as the specificity will becomes too much at one point of time.
In the sass section of the code, notice on Line 29, where we have again nested properties that share the same namespace, ie name. ( font-weight, font-size etc shares the namespace of "font")
The same is unwinded accordingly and check the middle column of css to see how the output is turned out. As far as possible, look for opportunities where in we can isolate a piece of code, convert to a mixin or placeholder and reuse them in the maximum places rather than writing 10 level deep nesting thereby making the css really scary and tangled. Always KISS :).. ( Keep It simple Silly! )
No comments:
Post a Comment