Hello Coders its Day 20 Round 2 of #100DaysOfCode #301DaysOfCode. Today I practiced using SASS/SCSS, using it locally, used nested feature, variables, extends, and mix ins.
Overall it is a much cleaner way to write CSS. Here is a brief summary of what I learned and the documentation.
What is SASS/SCSS?
Nesting is a powerful feature with using SASS it allows you to write in multiple selectors and elements be affected in the same bracket or code. It looks a lot cleaner in the code because you know exactly what it is affecting. For example if you had a header and you listed all of the changes in the headers <li> <ul> <nav> etc, you would see all of the style code inside of header easier.
Another powerful feature in SASS is using variables. Variables allow you to reuse code and essentially make your own framework. You are able to make your own framework if you have enough variables in the code.
All you need to do to create a variable is to add a $ in front of your selector. Variables are commonly used to affected multiple pieces of code and usually at the top of the CSS file.
Similarly to variables extends allows you to reuse code. However extends is usually used for CSS properties. The common example is to use this on buttons for its padding, margin, border, display, etc.