In recent time got to work on CSS . Started with SCSS initially it's really a cool one being a react enthusiast I got some relaxation on seeing the import being used in SCSS.
Here are some of the cool stuff I came to know in the SCSS
This feature is available in CSS itself here in SCSS present with a different syntax
now it can be used in the whole file as
Media query can be nested inside the class. By doing so we can see the actual size and size we need in the media query
Conditional statements , common functions , Loop,.. wait wait all these are programming stuff isn't CSS can be a challenging program too if you're answer is no it's not then you haven't played with any of tough animation stuff!
Using mixin we can use these stuff in SCSS
The repeating properties can be declared in a mixin and can be reused in places you want .
For me flex property are the things I used to repeat a lot .
So I created a mixin named flex and declared the properties that are going to be used often.
mixin has way many usages I would recommend this article from scotch.in which explains lot more in mixin
Many time you needs to classes to be combined the additional class will have the property like color or anything that is added to override the main class or add additional property
now the div the class has it's own property of background and width , this property can be overridden by using additional class like class-active-cls
I took this nice design from dribbble by Charles
I used a lot more flex here to get to know about flex more
You can check the full code here
check more pen here
newbie for CSS! Open for suggestions
Share the SCSS tricks or methods that I missed
Thanks for your time
Happy coding ! Keep Sharing