Supercharge your CSS with SCSS
There’s a lot of moving parts to web development, and a lot of crappy tasks many of us don’t like doing, but are considered best practice.
We’re going to take a look at a number of ways you can significantly improve your development workflow with little effort on your part over the coming weeks.
The good news is: you don’t even need to worry about doing half of these, because you can automate most of them! The bad news: most developers don’t seem to take the time to learn.
This week we’ll look at how you can improve your stylesheet habits by using SCSS.
If you haven’t already, it’s time to switch to SCSS by default for every project you take on to move your CSS to the next level. The long-term benefits far outweigh the time you’ll spend learning upfront, and there’s not actually that much of a learning curve.
There are a number of preprocessors out there, like LESS, STYL and more, but we’re focusing on SCSS as we use it for our projects at The Apartment. Each has its own benefits, but we’ve found SCSS easiest to work with so far.
Nest everything
SCSS is a preprocessor which lets you use features that aren’t a part of the wider CSS standard yet, and provides better workflows for maintaining your stylesheets. If you’ve ever written even a modest size website, you’ve probably learnt that it quickly gets pretty tricky to maintain clean, easy to read stylesheets.
With SCSS’ preprocessor, you can reduce the amount of times you repeat yourself and ensure you’re writing clean, maintainable code for the future.
Perhaps the most important part of SCSS is nesting, which allows you to write CSS in a similar way to HTML. Instead of writing a series of selectors every time you’re writing a new style, you can create an outer class, then put all other relevant selectors inside of it.
For example, if I had an outer .blog-post class and I wanted to only affect the styles of elements inside that class, I would nest like this:
.blog-post {
margin-top: 40px;
line-height: 25px; a{
color: $brand;
} .meta {
text-transform: uppercase;
} .entry-title {
text-transform: uppercase;
margin-top: 5px;
}}
Once you’ve got a handle on nesting, the next thing you need to know is about variables.
Don’t Repeat Yourself
Inevitably, there’s always a set of colors or fonts that end up littered throughout the code over and over again. When you need to change one of these colors it becomes an exercise in ‘find and replace’ which can go wrong.
One big lesson I’ve learned over the last few months is when writing CSS it’s important to avoid repeating yourself as much as you can. The Don’t Repeat Yourself philosophy is an important one, and should be in the back of your mind whenever you’re writing stylesheets.
SCSS variables (also coming to official CSS soon) let you store a value like a color or font family and retrieve it throughout your code — helping you avoid repeating yourself, and making it easy to make changes in the future.
For example, our new site uses the color #00C66D throughout the design, so I’ve stored it in a variable called $brand.
When I want to use the color, all I need to do is declare the variable instead of write out the color, like so: color: $brand;
Chunk out your code
When this is compiled by SCSS $brand is automagically changed #00C66D anywhere in your code it’s used, which means you can easily swap out the hex value and have it changed everywhere in the future.
Another huge benefit is importing other CSS files into your stylesheet to avoid ending up with multiple CSS files or one monolithic file to rule them all. The @import command frees you up to chunk your site out into individual specific files for easier maintainability in the future.
Here at The Apartment, we embrace componentization in our SCSS, so we’re able to easily edit a specific part of a website in the future.
Each page (or snippet) is broken up into its own SCSS file which makes it obvious what you’re editing. Then, we tie everything together using a “main.scss” file, which is made up of only imports of each other file.
The SCSS preprocessor then compiles all of this into one clean CSS document that we can include in our code, which is great for maintainability and performance.
Fitting SCSS into your workflow
There are tons more uses for SCSS out there — mixins are amazing — but we’re not going to dig into those today. What you might be wondering, however, is how to make SCSS fit into your workflow if you’ve never used one of these weird preprocessor things before.
On the surface it seems scary and complicated — but what you’ll be really wanting to do is use some sort of automation workflow, be it Gulp, Grunt or something else to take the load off so you don’t have to lift a finger.
In our next development post we’ll tackle what these are, how they’re not as scary as they seem and an easy way to get started with setting up a more productive workflow.
