So SASSy: Part 1

I am so sorry about that title, but I'm a little late to the SASS/SCSS game, and I felt the need to join in on something here. I'm probably rehashing what's been said thousands of times over the last 11 years, and I'd be aghast myself, but frankly I typically avoid front-end coding like the plague (which I've avoided many times in my day). Let's get into this though, because I can't tell you how much I've enjoyed working with SASS the past few months.

I've worked with CSS pretty extensively in the past, but always found it to be massively cumbersome, hard to maintain and keep track of, and incredibly difficult to get it to do what you wanted with targeting. CSS has been fracturing quite a bit the last 10 years as quick advances in web design have left standards lagging far behind. I have had every intention of looking into SASS for years now, but was finally forced to dive deep into it recently when I was customizing the template for this very site.

Variables

I'm starting here with the pièce de résistance, variables. Being able to assign what amounts to default values for various selectors really speeds up your workflow. Many editors of course now let you find all instances of a matched string in a document and change them, but having variables allows you to separate logical areas of your CSS into separate files. For example you can have a file dedicated solely to the styling of all buttons on your page.

If you do this, though, you lose the ability to quickly change, say, the primary color used throughout your page. SASS has you covered there.

$red: #8a89c0; //Primary Color
$yellow: #00ffc6; // Secondary Color
$black1: #111; // Header, subscribe, back to top button, etc
$black2: #222; // Main titles

Now all you have to do is edit the hex in this one location, and let SASS do the rest for you as you reference that variable throughout any of your SCSS files. How does SASS reference this variable across multiple files, one might ask? As a default, SCSS variables can be placed in a settings.scss. This sits all by its lonesome at the top of your SCSS assets file structure.

By convention you will also have a main.scss file. In here the simple magic happens. Using the @import directive you can structure all of the SCSS files you want to be included when the compiler builds out your single CSS file.

@import "settings";
@import "base/buttons";
@import "base/forms";
@import "base/style";
@import "base/editor";

All of this builds to being able to define simple CSS constructs that you would probably need for any and every page you might make, but make it general enough that editing a few variables can completely change the look of your page.

body{
    font: $font-size $font-family;
    line-height: $line-height;
    font-weight: $font-weight;
    color: $text-color;
    background: #1D202F;
    opacity: .99;
    -webkit-overflow-scrolling: touch;
}

There, that's it, now I have a baseline set of CSS for the body element that can easily be updated just by changing the values of the variables in the settings file. This can easily be spread throughout a default set of code blocks to help you keep the look and feel of your site consistent. For instance using a primary and secondary color base that are both used throughout your site in different elements, without the need to worry about updating the color for each (green and purple anyone?).

Next time I'm going to get into multi selection so you can target very specific elements, without the need for IDs, and without losing your way in all the CSS.