Table of Contents
CSS preprocessors were developed primarily to enhance the basic CSS technology by adding some behavior and features known in programming languages. If you are new into this subject you might be a little confused because of so many options available. Sass (sass and scss), less, stylus, css-crush, myth, switch css and DtCSS to name just a few of them. Today I want to help all of you using Sass to optimize it and reduce the amount of your code.
Why to use Sass
Let’s say it straightforward. CSS is hard. You might not think this is true, but when we are talking about good and maintainable CSS, it can be incredibly hard. Another problem in CSS is that it can quickly become repetitive. You use one rule or property here then there and before you can spot anything … It is too late. Not to mention using same values for margins, radius, padding or same colors across the stylesheet. Funny – well, not so much – is when you want to change one of the main colors in you palette used in the project.
In that situation you have only one option – change every single appearance of the value manually and hope you will not have to do that again. If there was some way to store the value in ONE variable and then just use that variable instead. Wouldn’t it be beautiful? Fortunately, preprocessors can offer you help here. My favorite one is Sass. It brings all you need and know from programming like variables, functions, conditional statements and much more. If you have 20 minutes, read this to learn everything you need about Sass.
Now, let’s finally move to tips on how to optimize your Sass code.
Sass @import directive
Quick warning! When we are talking about @import directive in Sass, it is not the same as you know from vanilla (i.e. basic) CSS. Yes, it is used to import another Sass files into the current one, but it works differently. When you import additional Sass stylesheet using this directive, you are using the same syntax:
SCSS:
@import “base/_reset.scss”; @import “layout/_header.scss”; @import “layout/_main.scss”; @import “layout/_footer.scss”; @import “modules/_buttons.scss”;
The difference is that when you compile the final Sass file all the rules from imported stylesheets will be copied into the final one – merged together. So, the final result of compilation will be one big file containing all the code you imported and used without single mention of any @import. In short, directive will be used during compilation and then removed. You will not need the files you imported to get the final file working correctly. It will also not influence the browser performance and loading time as CSS import would.
Quick note: The project architecture used in example is known as SMACSS. It basically means to split the whole project styles into separate and independent files and folders – modules – and put them together in the end of the development process. Read more about modularization your CSS here.
Use variables
One of the biggest advantage of Sass, and many other preprocessors, is its ability to create and use variables in your stylesheets. Let’s take a step back to the example mentioned in Why to use Sass part. Imagine you have a palette of colors to use and specified values for margins and paddings and probably also for border-radius. Normally, you would have to type these values all over again every time you would want to use them. Not anymore with variables.
In Sass you can create a variable and store information such as hex value for color, numerical values for margins, width, height, border-radius, etc. Then, any time you will need to use this specific value, you will just use the name of variable and Sass will do the rest of work for you.
SCSS:
$color--primary: #2ecc71;
$color--secondary: #a119ff;
$color--tertiary: #cc8914;
$font-size: 16px;
$font-stack--main: “Open sans”, arial;
$border-radius: 4px;
// Use of colors
.btn--primary {
font: $font-size $font-stack--main;
color: #fff;
background: $color--primary;
border-radius: $border-radius;
}
Compiled CSS:
.btn--primary {
font: 16px “Open sans”, arial;
color: #fff;
background: #2ecc71;
border-radius: 4px;
}
Use Mixins
Another way you can optimize your Sass code and reduce total amount of code is to use the smart feature called mixins. What are mixins anyway? In short, mixin lets you make groups of CSS declarations you want to use repeatedly throughout your project. They look similar to placeholder selectors with one exception. Mixins let you pass in values as parameters to make your code more flexible. So, if you want to create reusable block of code with ability of parameters, you can use mixins, otherwise you had better use placeholders or extends.
SCSS:
// Simple mixin for button
@mixin btn($color, $width, $height, $bcg, $radius) {
display: block;
font: 16px “Open sans”, arial;
color: $color;
width: $width;
height: $height;
background: $bcg;
border-radius: $radius;
}
Nesting the rational way
Another interesting thing in Sass is ability to nest elements inside each other. This can come very handy, but quickly turn into catastrophe after compilation into plain CSS. For this reason, good rule of thumb is to nest elements up to three degrees at max or to use nesting only for elements such as list.
SCSS:
.nav {
display: flex;
justify-content: center;
// first degree
.nav__link {
display: block;
text-decoration: none;
color: #333;
// second degree
&:focus,
&:hover {
text-decoration: underline;
color: lighten(#333, 10%);
}
&:active { color: darken(#333, 10%); }
}
}
Compiled CSS:
.nav {
display: flex;
justify-content: center;
}
.nav .nav__link {
display: block;
text-decoration: none;
color: #333;
}
.nav .nav__link:focus,
.nav .nav__link:hover {
text-decoration: underline;
color: #4d4d4d;
}
.nav .nav__link:active { color: #1a1a1a; }
Personally, I use nesting only for :focus, :hover and :active states and also :before and :after pseudo-classes. This way, I think, it is much easier to use the smallest amount of selectors to keep CSS specificity as low as possible. Otherwise, you can overdo it and end up with CSS like:
CSS:
/* Bad example of nesting */
header .container .nav--main li .link { … }
section .order .rightcol .form .text-core .text-wrap .text-tags .text-tag .text-button a.text-remove:hover { … }
Use Sass color functions
Not everybody is master in color theory and not every developer wants to spend his time thinking about what shades or tints of she should use. This is another field where Sass can become very useful and reduce the time you would spend on the project otherwise. In Sass, you can use many different color functions, the most interesting are lighten & darken, saturate & desaturate, adjust-hue, complement, grayscale and invert.
Quickly, lighten($color, $amount) will make the color lighter while darken($color, $amount) darker. Saturate($color, $amount) & desaturate($color, $amount) will increase or decrase the saturation of chose color. Adjust-hue($color, $degrees) will change the hue of color according to provided degrees. Complement($color) will return the complementary color of the picked one. Grayscale($color) will convert the color to grayscale and invert($color) will return its inverse version.
With Sass and those functions, you will become a specialist on color theory in a few seconds and save a lot of time.
Summary
Preprocessors are not useful only to bring some fresh air to plain CSS. They can also enhance your workflow and help you keep the code cleaner, simpler and maintainable while reducing total amount of lines. However, keep in mind that no matter how shiny those features are, always think about the output CSS. I hope these five tricks will help you leverage the abilities of Sass to new level and speedup your work.
What are your tips for Sass you use on a daily basis?
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
