Add some Sass to your website! ✨👓✨

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.

installing sass

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 after is 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!


I made a dumb website 🦆

Last week, instead of writing a blog post, I spent my entire Friday (or 10 hours of it at least), making a site of questionable usefulness called Quackoverflow.com. Technically this blog is supposed to be about doing new things and learning along the way, so I suppose this counts as content! 😀

Other than a quick HTML-only one page site that I made last year to see how web hosting works, I’d never made a site from scratch… At least not with all of the typical elements you might find on one. I figured if I was going to make something that’s mostly meant as a joke, I might as well learn from it!

The site consists of a rubber duck, and it squeaks if you click on it! There’s also a hidden Easter Egg that may or may not be a bug. 😉

For those who aren’t involved in the tech world or who are just getting their feet wet in it, there’s a very popular site amongst developers called Stackoverflow.com where anyone can post a development question and probably get an answer from the community. As for the rubber duck, it’s also a common fixture in the developer world, and even has its own Wikipedia article. It’s used in something called “rubber duck debugging” which involves meticulously explaining your programming problem to a rubber duck (or other object) in the hopes that the act of explaining it out loud and in detail will help you find a solution yourself.

My brain loves finding patterns. Every time I make a pun or find some other interesting and possibly unknown way of connecting the dots, I feel that shot of dopamine rush through my temples. Ok not literally, that’s ridiculous, but I really like this kind of thing.

Thus, one day at work while doing something completely unrelated, my brain produced the diamond in the rough that is Quackoverflow.com … which amazingly wasn’t taken!

Though I’m sure it’s for lack of experience, I found that building layouts on the web was more difficult than on Android. My first attempt looked pretty good with one browser size, but on mobile everything was tiny and hard to read.

Then my attempt at using Forklift (an app) to upload my changes via FTP failed miserably, and led to everything I’d done being deleted. It was just as well since it was pretty bad, but still kind of discouraging.

Take 2: I’m armed with an espresso and redo everything, using a “mobile first” approach. It worked way better and although it wasn’t as smooth sailing as I though, I’m happy with the final result.

It’s mostly responsive, it looks good on mobile, and it squeaks… who could ask for more!