Check this SCSS methods before using SCSS,Build an Apple iMusic Style
Tags: css, html, webdev, beginners
Published: 2020-07-02 14:30:37

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 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3i2ut9z47bzp6exnlb4m.png)

now it can be used in the whole file as 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xbjsijzabbb0u9ci27it.png)

#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 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5djvk29adoirgpz5eeiw.png)

#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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9ezj4n0kx99nt0l5px78.png)

mixin has way many usages I would recommend this article from [scotch.in](https://scotch.io/tutorials/how-to-use-sass-mixins) 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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/md0yc4mlx57s9i8uumav.png)

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 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/blldh212pkj5b9f0hpjt.png)

##Apple iMusic style 

I took this nice design from dribbble by [Charles](https://dribbble.com/shots/12389575-Apple-Music-Dark-Theme)

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 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qu3yd31arlnfh065fbqk.png)

the respective styles for the html 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0qmi765l22ioy0emvbww.png)

You can check the full code [here](https://codepen.io/karthick30/pen/abdLwxN)

check more pen [here](https://codepen.io/karthick30)

*newbie for CSS!* **Open for suggestions**

*Share the SCSS tricks or methods that I missed*

 ------------
 *check my dev projects on* [github](https://github.com/karthick3018)
*check my styles on* [codepen](https://codepen.io/karthick30)
 *Follow me on* [twitter](https://twitter.com/Karthick_R_30)

-------------
*Thanks for your time*
*Happy coding ! Keep Sharing*
*Stay Safe*