I just restyled the colours of the blog to match the colour palette of my illustrations. It’s kind of a pain changing all the CSS manually, since WordPress themes have a ton of classes that you might not be familiar with, and if you want to change one colour somewhere you have to do it in a dozen more places. I downloaded the CSS and edited the whole thing by hand in Brackets, but that took a while and I figured there must be a better way.
I posted a question in the Slack group for Les Pitonneux, a non profit skills incubator doing amazing work in Montreal, and got this answer:
I’d heard about Sass before, but I was focusing on Android development at the time and kind of overlooked it. Looking at it now, it seems pretty amazing!
Variables in CSS is a huge improvement if you want to make something that’s easy to maintain and that has a coherent design. The whole idea behind CSS is to be able to style your HTML more efficiently than using inline styles, which get messy fast. Variables let you change colours or other values in one central location without having to pinpoint all the different places you might have used them (and inevitably forgetting a few places).
Of course, it would be kind of shady of me to flaunt the merits of Sass without having actually tried it myself, so without further ado lets get Sassy with CSS!
Step 1. Installing it (on a Mac)
According to the installation docs, I can either use some apps, or the command line. Since it’s way cooler and makes me feel like a hacker, I’ve decided to use the command line. On a Mac, the app for this is called Terminal.
Nothing says “I have no idea what I’m doing” like using the command line!
The actual command to install it is:
sudo gem install sass
You might have to enter a password, or not, every command is full of surprises! 😂
Step 2. Creating your conversion folders
I’m just doing everything in this guide. First I set up some conversion folders, like so:
sass --watch /Users/jonathan/Dev/sass_in:/Users/jonathan/Dev/css-out
The part before the : is my inputs folder, and the part afteris the output, as the name implies. If you’re wondering how to get your filepath into the command line, like I was, just copy/paste the folders from Finder into the command line. It’s that easy! 😄 You can also do the same thing but for individual files, it’s up to you.
Step 3. Writing the code
Basically, you write your CSS in Sass or SCSS, which then does a bunch of the heavy lifting and converts it to normal CSS. I just learned that Brackets works with SCSS and Sass, so that’s cool. I assume that SCSS is just a newer / better version of CSS. Who knows?! 🤷
Because variables is the part of Sass that I care about, lets start there!
Turns out, it’s ridiculously easy. The syntax for a variable is
$variable-name: "some value";
and here’s what it looks like in my code:
$secondary-color: #2C4B5E; .container { width: 780; margin: 0 auto; background: $secondary-color; }
Once I had it set up, I managed to change colours in a fraction of a second. THIS IS AMAZING! 💥
I didn’t even have to rewrite any of my original CSS! I could just duplicate it, change the extension, and add Sass on top of it! 😄
There’s a tons of other features build into Sass, but you’re free to look into those on your own. At any rate, variables alone should be able to drastically simplify your CSS!
I’d also like to give a special thanks to Mateusz Wijas for suggesting Sass as a solution to my problem. I can tell that this is going to save me a ton of time going forward!
Happy coding!
SUBSCRIBE TO GET THESE BLOG POSTS SENT TO YOUR INBOX!👓