DEV Community

Cover image for Check this SCSS methods before using SCSS,Build an Apple iMusic Style

Check this SCSS methods before using SCSS,Build an Apple iMusic Style

karthick3018 profile image KaRthick ・2 min read

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

now it can be used in the whole file as

Alt Text

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


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

mixin has way many usages I would recommend this article from 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

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

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
Alt Text

the respective styles for the html
Alt Text

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

Discussion (5)

Editor guide
urielbitton profile image
Uriel Bitton

Hi nice article. Quick question. How would you initialize and link your htnl to a SCSS? Do you need to do anything different than linking a regular css file?

karthick3018 profile image
KaRthick Author

no need of any linking but you can't use scss directly in browser you need to compile it to css first check out this link

iam_shylesh profile image
Shylesh S

You have to use an extension called Watch Scss.

karthick3018 profile image
urielbitton profile image
Uriel Bitton

Ok thanks