DEV Community

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

Posted on

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

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

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

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

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

Top comments (5)

Collapse
 
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?

Collapse
 
karthick30 profile image
KaRthick

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
sass-lang.com/guide

Collapse
 
iam_shylesh profile image
Shylesh S

You have to use an extension called Watch Scss.

Collapse
 
karthick30 profile image
KaRthick

yeah in VS code you have marketplace.visualstudio.com/items...

Collapse
 
urielbitton profile image
Uriel Bitton

Ok thanks