Save time using SASS to create classes with variations

António Fernandes — Fri, 19 Jul 2019 16:35:51 +0000

Last week, I had a problem.

I needed to define a class in HTML that would give me the margin according to the last char. But this last char wasn’t always the same, nor the place was the margin would be applied.

I wanted a class that would be margin-top-1, or bottom,or left or right and the last number would go from 1 to 5 rem.
I was using SCSS already but, I didn’t know how to do it.

God knows that I searched for an answer, but still could not find how that should be done.
Maybe I googled it wrong but I know the answer now, and I was not limited to the margin.
Now I use this everywhere.
Let’s see how I’ve done it.

We have all been there. We need to create a class with different variations so that we can use them in HTML. Although SCSS can save us a lot of work, it is still repetitive, it’s still boring.
Sometimes the best way to avoid repetitive tasks is by doing a repetitive function.
How? You ask.
Through a @for directive.

So let’s say that you need to define a CSS class to use in your HTML with some variables. Let’s say you wanted to define the class margin-(number) and the number would be the value in rem. Something like this:

Well if you only wanted to define .margin-1 there is no need to make a loop. You can simply write it like this but, let’s say for the sake of this article that you would want to define margin all the way to the 100rem. That is the beauty of SAAS.

You can define a starting point, an ending point and a @for directive to iterate through the numbers.

So, let’s see how does it look!

And that’s it. after you compile it, it’s like if you have written 300 + lines of code.

Won’t post the full CSS here because it’s too large, but you get the idea if not open your text editor and try it yourself.
And now you can use the margin class on your HTML as you like.

But what if I want to define the top or bottom or any other?
Well, in that case, you should define the variables, and create other classes.

Still can use the same directive.
The only difference is that you need to define top, bottom, left, right and auto. But in the end, it is the same that we have done above. You can use this for everything.

Here you go, with approximately 30 lines of code, you have compiled a CSS file with more than 2000 lines.

And the possibilities are endless, you can use this with almost all attributes, width, height, you name it.
Have fun!

DEV Community: António Fernandes

Save time using SASS to create classes with variations