You can create variables. So you can set your $pink colour to #ff7878 and enter it whenever you use pink. What’s cool about this? If you want to adjust the shade of pink later, you only have to edit the variable and it will automatically apply everywhere the variable is used. No more find and replace!

You can nest your selectors. So to target the h2 element inside #my_div I don’t have to write #my_div h2. Instead, I put the selector for h2 inside the brackets for #my_div.

You can even create functions

Have you ever used border-radius? Or box-shadow? How freaking annoying is it to write this out every time?

I’ve created the border-radius function to accept a radius parameter. Then, when targeting #my_div, I just say: include the border-radius function, using a value of 20px. Then it basically includes everything inside the border-radius function, using 20px as the value. I can reuse this function as many times as I want, all throughout my code!

Converted into CSS

So you actually use math inside your CSS, and it calculates it out for you!

And that’s just the beginning…

I can’t believe it took me so long to switch to SCSS. It makes coding so much faster and cleaner. I used SCSS for a few designs then had to switch back to normal CSS for one project, and it felt like a huge chore! It suddenly just seemed so tedious, repetitive, and slow.

That being said, SCSS isn’t simple to set up

I think this is why I didn’t use SCSS for so long. I never quite understood how to use it (which seems silly now). The thing is, SCSS isn’t just something you can type into your text editor. This is because SCSS isn’t code you put on the website; you write in SCSS and then convert that to CSS. So in the end, you still use CSS, it’s just that you get to write your code in a different language at first.

If you’re interested in trying SCSS, you can read about ways to install SCSS. I personally use PhpStorm so I used JetBrains’s guide for transpiling SCSS to CSS. So now, I use SCSS in my style.scss file and every time I click “save”, PhpStorm automatically converts that into CSS in a matching style.css file. Nifty!

I'm a 27 year old California girl living in England (I fell in love with a Brit!). I like to inject a little #girlpower into the WordPress development community by teaching women how to be coding badasses.
more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

Yeah it’s really fantastic! It makes it soooo insanely easy to change your whole design’s colour scheme. Instead of doing about 10 find + replaces, all you have to do is change the variables you set and then it changes everything! It’s incredibly useful. 🙂

Wow, I never heard of this but I like the looks of it. I miss CSS right now. All this PHP and JavaScript from school is hurting my brain. I am trying to figure out the code to find the diagonal of a rectangle with JavaScript. It’s a challenge our teacher gave us just to see if we can get it. Funny thing is, the teacher admitted he doesn’t know it. Seriously!!??

When I first heard about this, I didn’t even know what it was. Until I researched more about it, it wasn’t a whole new language like I thought. It does seem easier. Maybe one day I’ll try it. Having the freedom to make your own variables is great!

Similar thing here! I think I was just so confused about what it was. I kept hearing about how you have to install Ruby and how it’s not really a CSS alternative, but it’s a pre-processer. I think I just didn’t get it, you know? And although it’s not actually super hard to set up, it sounds a bit confusing.

But SCSS really came in handy with my latest pre-made theme, which has 9 different colour schemes. Normally that would mean 9 different stylesheets, all containing the same code but with different colours, right? Then if I want to add/change/remove something, I have to edit all 9 files… It sounded sucky.

But with SCSS I just create ONE function that takes in the primary colour (and any secondary colours) as a parameter. Then I have 9 different CSS classes, like .scheme-red or whatever. And in my SCSS I just have:

This seems really interesting! I love the idea of setting up the colors as variables, that would make changing the colors throughout a design SO FREAKIN EASY! I’m def going to have to look into this! 🙂