When you are working as a front end web developer you need to update your skills rather often, and that’s one of the things I love in our modern world. The technologies don’t stay in one place too long, always updating, changing and developing to solve our problems in an easier and faster way.
Jumping into the Sass wagon
It might be a little scary at first, to start using new tools and technologies if you haven’t gotten the hang of it yet. But that could be fun too! I recommend using Sass at first in a project that’s not too serious – a project you can play around with and not be afraid of breaking things. That’s how we learn after all!
So, what is Sass?
Straight from the Sass webpage we see a cool definition like “Sass is CSS with superpowers!” And you know what? I will agree with that!
I think to better understand what Sass is, we should see what is the problem Sass is meant to address.
I will assume that you are a web developer or a front end developer or a designer with some code knowledge, that’s probably why you have read this post until this point. So let’s jump into it.
Have you found yourself while working on a project, editing a long CSS file?
Have you found it hard to find where to change some small attribute or a class in that file?
Have you tried to change the main color for some elements and have been forced to find them one by one to change the color?
And then trying to change that color you are forced to memorize the HEX code?
That is madness, but you know what? You are not alone! Many developers face the same problem every day and that’s what Sass is for.
How Sass solved the problem?
Ok let’s get started with the part some people are sometimes confused with. No, you don’t have to learn a new syntax, our old CSS is valid in a Sass file. A Sass file has a SCSS extension and you can write into it with our normal CSS. So no worries there, you can also use a more simple syntax or a so called Sass syntax in the file. But let’s keep it basic for now.
Now that we got that out of the way let’s see how SASS can make our lives easier and actually keep our style sheets more organized. So let’s say we have our style sheet file named “style.css” and it has around 1500 lines of code! That’s a lot and frankly a nightmare to maintain. But let’s say that we could have 6-7 separate files that will all merge into one file later on. So we can have for example one file for our header css, one for our navigation css, one for our widgets css and so on. These separate files are called partials. All those files will merge into our style.css.
For example, for a typical WordPress installation we have the following folder hierarchy:
wp-content -> themes -> our theme.
To keep everything organized let’s create a new folder inside our folder’s theme, call it sass and inside of it we will create a new file, name it “style.scss” and a folder we will name partials. Inside of the “partials” folder we will place all our partial scss files that will merge into our new “style.scss file.
To compile all our partials into our style.scss and afterwards our style.scss file into style.css so that every browser can read it, we need a compiler. There are many options out there, I personally like the visual approach so I use an awesome application for Mac called CodeKit. It compiles sass into css and much more. You can also achieve the same with terminal and task runners such as “Grunt.js” but I prefer the visual approach.
CodeKit can watch for any changes in our style.scss file and compile it into our css file, so if you change something in the partials files and save it, these changes will show in our style.scss file and CodeKit will compile it automatically into our style.css file. Not to mention that CodeKit has an awesome auto refresh browser function that will automatically refresh the browser every time you do some changes in your style.scss file and save it. This saves you a lot of time while developing a new WordPress theme for example.
With partials we can keep our css more organized and a lot easier to maintain. If we want to do changes in our navigation, we don’t have to scroll up and down in the 1500 lines of code of the style.css file but only go to the navigation file. These files are called partials and the name of these files should start with an underscore to indicate it is a partial, e.g: _navigation.scss
Those are partials but is not the only thing SASS can do, it can do so much more.
Now let’s get into variables!
To understand easier let’s first see what variables we are intending to solve. Let’s say you have a website and suddenly you want to change the font family or font sizes or even the main color you use in the whole site.
This easy task can become very time consuming just because you are forced to find each string of css that you want to change in your style.css file and change them one by one.
Now let’s say you create a partial file and name it _variables.scss where you specify in simple language your font family, main color, etc. like so:
$font-sans: Lato, sans-serif;
$font-serif: Georgia, Times, “Times New Roman”, serif;
$font-mono: “Courier 10 Pitch”, Courier, monospace;
We use underscore to let our compiler know what file is a partial and similarly we need a dollar sign to let the compiler know that this property is a variable, e.g: $color-site-bg: #f5f5f5;
Now let’s say I want to change the color of the links in my site, it’s now a very simple task. I should got to my _variables.scss file and change the color there, recompile my files and that’s it!
This is the tip of the iceberg of what Sass can do for you!
When using Sass for my WordPress theme development, I also use a great Genesis sample theme “sassified”, if you can say so. The theme has been created by Greg Rickaby. https://github.com/gregrickaby/genesis-sample
His theme uses Grunt.js so you might want to erase a few files if you don’t want to use Grunt. I have created my own version of it with the files I use.
Of course to use this theme you need to own the Genesis framework as well.