Why I learned SCSS


Photo by Kate Stone Matheson on Unsplash
Photo by Kate Stone Matheson on Unsplash

CSS was pain. I mean everytime I had to repeat myself with UL, then UL LI, then UL LI A, then UL LI A SPAN...aggh

One afternoon, I was wondering if there is a way to write CSS with less keystrokes, I stepped on SCSS. I literally typed How to Write CSS less and within results I found words like Preprocessor and all.

(sometimes I feel like someone is there, watching my keywords and navigating me to the solution)
Anyways, Setup was easy. You just have to install Node on Windows, followed by Ruby. Compiling SCSS was also easy. I fell in love with Preprocessors since then. Here are a few reasons why I learned SCSS:


Nesting saves typing

You don't have to repeat the selector chain like ul li in one line and ul li a in next. With SCSS, its so

ul { li { a { } } }
Compilation is automatic

Given that you need to open an extra Command Prompt for SCSS compilation, there is no need to do it manually. CSS output is generated as soon as you hit CTRL + S on your editor Also, errors are generated as soon as Preprocessor finds that you are missing a colon in your CSS file or you missed a letter somewhere.

Mixins are quite reusable

They are sort of javascript functions (sort of). So every now and then, you can copy-paste them into some other project. And samples of mixins are everywhere in form of gist or StackOverflow answer.

@mixin shadow($settings) { box-shadow: $settings; -moz-box-shadow: $settings; -webkit-box-shadow: $settings; }

Make a variable, and forget it

Now if you have worked on CSS for a while, you will understand the pain of memorising colors. And when Client demands a change in color to Barbie pinkish, lets say, You have to use Find and Replace approach.

Not anymore.

With SCSS, you can save color hexa codes, width of a border, height of an icon in variables like this:

$font-stack: Ariana Grande, sherif; $primary-color: red; body { font: 100% $font-stack; color: $primary-color; }
Imports makes it arranged

No need to fill up single CSS file with all styling. It sounds lazy but is not productive at all and I believe in being lazy but productive at same time. So the imports. Understand imports like Lego. You joint them together, you get Optimus Prime from Transformers.

Imports allows you to segregate your CSS into multiple files. You can make one variable.scss for variables, heading.scss for h1 to h6 tags and import them(combine them) in one style.scss

\\style.scss @import variable.scss @import heading.scss body { background-color: $off-white; }

Apart from these, there are other features as well. Among all I liked the Nesting most.

Yes, you need to learn CSS first. Learning and working with SCSS won't make it easy for you to create interactive divs sitting side-by-side. Instead, SCSS makes it easy to write CSS and in less time. So obviously, knowledge of CSS is mandatory. SCSS just makes things simple.

Moreover, SCSS is a developer thing. You can jump to exact line in SCSS file where there is .foo class. With nesting in place, any developer can easily recognize that what styling has been applied to .foo and what are stylings for its children. In simple words, like nesting of tags in HTML file, SCSS make it relatable with HTML. So you can actually check the children of a class in SCSS if you know the children of specific element in HTML.

Thanks for reading.

Sudheer — listens to SoundCloud, Strings being his favourite band, learns stuff to make life easier.