Design, HTML & CSS

Finally got to use SCSS, and learned using it

by Erik Briones | August 14, 2019

I have heard about CSS preprocessors SCSS and LESS for a long time and even tinkered with it. In Bootstrap, there was a LESS (i think) folder which I tried to edit, but I did not really quite get it.

Until today, when I actually used it in a personal project.

I made my design in Figma (my current favourite tool). Now I have a lot of set styles – like Brand Color1, Brand Color2, Grey1,2,3 etc. I wanted to try to create a CSS stylesheet out of Figma automatically, so I searched for a plugin.

I came across this Figma to SCSS generator, and tried it. It worked so the next step for me is to open up Bootstrap Studio, and copy and pasted the generated SCSS to my project in Bootstrap Studio.

There was nothing for me to actually tinker in terms of SCSS, a few CSS styles would have worked. However since the filetype is already in SCSS, then it was a good time for me to practice.

By the way, I just did the basic include and using of variable and nothing beyond that.

A screenshot of how my SCSS file looks from the Bootstrap Studio interface
A screenshot of how my SCSS file looks from the Bootstrap Studio interface

That’s it! You see I told you it is just a few basic variables and includes. šŸ™‚ But for me it was a good start for something that I wanted to learn for a long time.

So I asked myself should Interface designer also learn about SCSS or LESS, apart from learning HTML/CSS? Are you a designer learning SCSS or LESS as well?

Let me know what you think in the comment box!

I am currently reading...

Sprint: How to solve big problems and test new ideas in just five days

Jake Knapp with John Zertasky & Braden Kowitz from Google Ventures