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

Global Variables

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

Nesting Media Query in a class

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

Mixin

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

Common function

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

'&' connector to connect classes

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

this can be used with Pseudo-classes as well

Apple iMusic style

I took this nice design from dribbble by Charles

I used a lot more flex here to get to know about flex more

This is the main wrapper which is used to display the song items

the respective styles for the html

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

check my dev projects on github
check my styles on codepen
Follow me on twitter

Thanks for your time
Happy coding ! Keep Sharing
Stay Safe