DEV Community

Cover image for SCSS Cheatsheet

SCSS Cheatsheet

Nero Adaware on March 11, 2019

What is SCSS SCSS simply means Sassy CSS. Sassy CSS is a CSS preprocessor that gives you access to use features that are not available i...
Collapse
 
lawrencejohnson profile image
Lawrence

These utility classes create a system that is no different than inlining css. If you have to add a class like font-size-20 to every element that you want 20px, you've lost both efficiency as well as any obfuscation from markup and css. Let's say your designer later comes back and says "Let's change the 20px font to 24px". You'd then have to make a choice between manually setting font-size-20 to 24px or going through your entire site and changing font-size-20 to font-size-24. You'd be choosing between making your naming confusing or dealing with a headache.

SCSS is great, but I think there are better examples for applied use.

Collapse
 
tifflabs profile image
tiff

CSS has variables as well.

Collapse
 
sharao profile image
Srinivas Rao Gunja

Now CSS has nesting feature too...

Collapse
 
ggenya132 profile image
Eugene Vedensky

Loops are so insanely powerful!

Collapse
 
isualize profile image
isualize

They are, but doing a loop like 1 to 70 generates a ton of (probably) unused CSS...

Collapse
 
giorgosk profile image
Giorgos Kontopoulos 👀

Perhaps you need npmjs.com/package/css-purge to cleanup the unused css but I hear you, for this reason I like to write down css classes without loops if I will only use a few variations.

Collapse
 
mandrewdarts profile image
M. Andrew Darts

Nice quick reference 👍

Collapse
 
haha profile image
HaHa

Amazing, Good job bro !

Collapse
 
dboatengx profile image
Boateng Dickson

This is very helpful. Thanks!

Collapse
 
drsimplegraffiti profile image
Abayomi Ogunnusi

Thanks .....saved this

Collapse
 
samjarvis244 profile image
Samuel Jarvis

Very Helpful Thanks.