Sass Basics — Supercharge Your CSS
By: Wandering Developer
Tags: Web Development, HTML, CSS, Sass, Scss

Being a web developer usually involves several technologies. At a minimum, you probably have a good understanding of HTML and CSS with a sprinkling of JavaScript for good measure. Add to that some back-end knowledge with a server-side framework and a database and you’ve got yourself a Full Stack (see what I did there?).

But, each layer of the stack over the years has been augmented slightly. Where SQL-based databases were prevalent in years past, NoSQL equivalents such as MongoDB has risen. From Microsoft, TypeScript has slowly started to make the lives of JavaScript developers much more productive. And, in the CSS world, projects like Sass have started to improve the styling, readability and function of the language.

Scss Tips

Rather than write endless paragraphs of explanations I’m going to distil SCSS into 3 basics Tips. SCSS, of course, is a very broad topic, but this will serve as a starting point.

Sass comes in 2 flavours, SCSS and SASS. I’ll focus on SCSS since it more closely resembles CSS. See https://sass-lang.com/ for more information.

Tip 1. Nesting

In a basic HTML layout, there is a <div class="outer"> tag that contains 2 <div class="inner"> tags.

To write a style that targets the inner class, in CSS you would write:

.outer { background-color: blue; } .outer .inner {

background-color: black;

color: green;

}

Pretty simple. But, how could this be improved using SCSS?

.outer {

background-color: blue; .inner {

background-color: black;

color: green;

}

}

At first glance, this looks example like plain old CSS. But, if you were to write this in a CSS editor is would fail because of the nesting. It surprises me that CSS doesn’t include this nesting feature out of the box because the target HTML is nested, but, this is the world we live in.

By applying this nesting technique, not only is your code easier to read, there are some simple enhancements.

If you needed to rename the outer class to avoid a conflict, achieving this in SCSS is much easier as the relationship hierarchy will be followed.

To take the concept of nesting further, you can add the & operator. This will essentially “copy” the previous selector and apply it to the nested element.

Take this CSS sample for creating an active and inactive state for a DIV tag.

.outer {

background-color: green;

color: white;

} .outer.active {

border: blue 1px solid;

} .outer:not(.active) {

opacity: 30%;

}

Again, another simple example. But, in SCSS this would be:

.outer {

background-color: green;

color: white;



&.active {

border: blue 1px solid;

}



&:not(.active) {

opacity: 30%;

}

}

The exact same result is achieved, but by bringing together the nesting feature with the & operator, we’re able to create much more readable code.

Tip 2. Mixins

The next feature to focus on are Mixins. If you’re used to reading code then Mixins are analogous to Functions in JavaScript.

Mixins within SCSS are used to inject reusable style segments. An example can be seen below. Let’s say you want to make similar (but not exact) border styles for elements.

4 similar border styles

The CSS for this would look a little like

.box {

margin: 1em 0;

max-width: 300px;

padding: .3em;

} .box.full {

border: 4px inset rgba(28,110,164,1);

border-radius: 0px 28px 0px 0px;

} .box.almost {

border: 4px inset rgba(28,110,164,0.75);

border-radius: 0px 28px 0px 0px;

} .box.faded {

border: 4px inset rgba(28,110,164,0.25);

border-radius: 0px 28px 0px 0px;

} .box.inactive {

border: 4px inset rgba(28,110,164,0.1);

border-radius: 0px 28px 0px 0px;

}

The only value that changes on the border is the Alpha component of the border colour. And if we wanted to change the base colour then it would need to change this in 4 places. Fortunately, SCSS to the rescue.



&.#{$name} {

border: 4px inset rgba(28,110,164,$alpha);

border-radius: 0px 28px 0px 0px;

}

} // Create a mixin that defines the border style

@mixin box-border($name, $alpha) {&.#{$name} {border: 4px inset rgba(28,110,164,$alpha);border-radius: 0px 28px 0px 0px;

margin: 1em 0;

max-width: 300px;

padding: .3em;



// Call the mixin to reuse the border style









} .box {margin: 1em 0;max-width: 300px;padding: .3em;// Call the mixin to reuse the border style @include box-border(full, 1); @include box-border(almost, 0.75); @include box-border(faded, 0.25); @include box-border(inactive, 0.1);

Wow, this is a huge difference in coding style! Not only is this fewer lines of code, but we’ve also created a reusable function that can be included anywhere.

The Mixin that’s defined takes 2 parameters (name and alpha value) and outputs a sub-style which includes the standard border, adjusted using the variable alpha value.

The &.#{$name} will output to .box.active and .box.almost because we’re combining this with the nesting principles from the previous tip.

So, if we wish to change the border colour, it’s just in 1 place and all 4 styles will update.

Tip 3. Variables

We touched on this in the Mixin section where variables were used to construct border styles. But, variables can be used throughout your files, not just Mixins.

When creating consistent styles across your application, variable reuse can come in hand.y

For example, if you same the opacity value to indicate active vs. inactive state. Instead of copying that value throughout your file you can simply define it once and reference it throughout. Then, if the value changes, your entire project will update.

// Define the Opacity

$my-opacity: 0.3; .hello {

background-color: blue;



&.inactive {

opacity: $my-opacity;

}

} .world {

background-color: green;



&.inactive {

opacity: $my-opacity;

}

}

Clearly this is a simple example, but, if you’re familiar with more complex languages such as JavaScript then you already have the skillset to utilise this feature to enhance your CSS and make it easier to maintain.

Other Features

SCSS doesn’t just stop here. Here are a few other examples: