SASS is continuing to grow in popularity and it’s easy to see why! Saving you time and frustration, while keeping things more tidy and organized – sounds like a win to us!
Tasks like swapping out colors that are used widely throughout a big site are made much simpler with the power of SASS and it doesn’t take much more knowledge above and beyond the CSS you already use. Almost any CSS property can be managed through SASS variables.
Similar to working with CSS classes, you are able to create a single declaration and then apply it again and again, saving you a lot of coding. Conversely, you can also easily replace elements with something new much easier when using a proactive approach with SASS.
A quick example of how you may use this idea is shown below.
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
Now anywhere you want to use the color of blue shown in the example above, all you need to do is add the $blue variable. If you ever want to change that color in all these elements, all you need to do is simply change the specific color hex in the $blue variable. And as you can see, the margin is also managed through a SASS variable in this example.
This video also shows it’s own examples of color swapping, margin management and even gradients. If you are interested in seeing some more of what SASS variables are capable of, you can check out this helpful document put together by the folks who manage the project. You may also find this recent post about SASS helpful in getting started.