SASS is the css pre-processor. It helps us to write the effective CSS by new syntax and features. CSS pre-processor is the very powerful and very effective for the web developers only if used well.
The most important feature of using pre-processor is - Easy maintenance and less line of codes.
If not structured and planned well SASS becomes night mare for you. Today I am going to highlight the few common mistakes we are or could do while writing SASS
1) Variables declaration and reuse
Make your Variables files to distribute into different sections
- Primary colors & sizes
- Links Colors & sizes
- Borders and icons colors & sizes
- Typography colors & sizes
- Buttons colors & sizes
The above separation keeps your sass file clean and clear . Developer able to pick where they want to make changes etc. instead of having a plain variable file with no separation.
TIP: Use the prefix while declaring the variables.
2) Mixins
Mixins are the most important feature. If not used well you will end in a lot of code which is junk.
Do not create any mixin which is getting used more than 2. A separate file for the mixin should be there with the clear "how to use" section
3) Keep your Layout(structure) and styling different
The properties which define the structure and layout of the page should be separate sass file and styling of the page should be separate. This keep your code much more organized and maintenance would be much easier
4) Separate file for each and every elements
You should have the separate sass file for each and every modules in your projects. Such as - buttons, typography , carousels , Sliders, etc
5) Never cross 4 levels in SASS specificity
Whenever you are nesting your sass code never go 4 level down deep.
Comments , suggestions, feedback are welcome.
Happy Learning!
No comments:
Post a Comment