CSS with Superpowers

Translated from German using DeepL.

Date: June 2020
Reading time: 5 minutes

Theory

This blog post is aimed at those who are already familiar with CSS.

SASS (Syntactically Awesome Style Sheets) is a program written in Ruby that compiles stylesheets for a browser. It is effectively an extension of CSS and is there to compile the SCSS/SASS code so that it can be interpreted by the browser. This has a number of advantages, as it offers various functions that do not exist in CSS.

SCSS, also known as Sassy CSS, is a frequently used syntax for CSS. It is similar to CSS. However, with better formatting. Therefore, CSS code works perfectly in SCSS - but not vice versa.

graph

SCSS: Stylesheet in which to work
SASS: compilation
CSS: document readable for browser

What can SCSS do?

Preparation

You can try out the examples below in two ways

Variant 1

To be able to work with SCSS, you must have a way to compile the file. I work with VSC and can therefore install the "Live Sass Compiler" extension. This then compiles my file into a CSS.

Link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass (opens in a new tab)

Now you have to do the following:

Create a file with the extension ..scss.
Compile the SCSS file (Watch Sass)
Link the CSS file (which was created) in the HTML

Now you can write the styles directly into the SCSS file. With a click on "Watch Sass" the written styles are converted and written into the CSS file.

watch

Variant 2

Thanks to this variant, the first steps are much easier, as you do not need an extension and you don't have to compile anything.

To simply try out SASS, I recommend the following website: http://beautifytools.com/scss-compiler.php

However, you can also use SassMeister (https://www.sassmeister.com/ (opens in a new tab)). This is a little more complicated at the beginning (due to the many options).

Variables

Variables are great. They allow for clearer code and save you a lot of work. If I have several buttons on my website, I may have to define the same color at each location. This problem is also solved by Sass.

$primaryBtn: #3f32ff;
 
.button-one {
    color: $primaryBtn;
}
 
.button-two {
    color: $primaryBtn;
}
 
a {
    background-color: $primaryBtn;
}

Now I want to change the color. I only have to change the value of the variable.

You can also use several variables for one declaration:

p {
    $border-thickness: 10px;
    $border-line: double;
    $border-color: black;
    border: #{$border-thickness} #{$border-line} #{$border-color};
}

Nesting

Nesting elements is no longer a problem.

SCSS

body {
    button {
        &:hover {
        }
    }
}

CSS

body {
}
 
body button {
}
 
body button:hover {
}

This reduces the number of repetitions considerably.

Mixins

Mixins are comparable to a function. With mixins you write a code once.
You can then use it anywhere.

One possible use is shown below. In a project, it may often happen that you want to center an element with the help of Flexbox. With pure CSS, you would have to declare the three lines on each element.

With SASS, however, I write a function once that places an element in the center. Now you just have to add this function to the desired elements.

@mixin center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.div-one {
    @include center();
}

It is also possible to pass on parameters

@mixin center($direction) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: $direction;
}
 
.div-two {
    @include center(column);
}
 
.div-two {
    @include center(row);
}

Extend

With extend you can transfer the properties of one selector to another. This means you don't have to write the code again and again.

.button {
    border: 1px solid black;
    padding: 10px;
    color: gray;
}
 
.button-submit {
    @extend .button;
    border-color: green;
}
 
.button-cancel {
    @extend .button;
    border-color: red;
}
 
.button-ok {
    @extend .button;
    border-color: yellow;
}

Nested styles

Not only elements, but also styles can be nested.

h3 {
    font: {
        family: fantasy;
        size: 100px;
        weight: bold;
    }
}

Calculate

Another advantage is that calculations can be performed.

Addition: +
Subtraction: -
Division: /
Multiplication: *

div {
    width: 80% - 20px;
}

Each

With each you save a lot of lines of code, because you can do something for several elements.
In the example you have four basketball teams. Now the appropriate background image is set for each team.

SCSS

@each $team in bulls, lakers, celtics, pistons {
    .icon--#{$team} {
        background-image: url('/images/#{$team}.png');
    }
}

CSS

.icon--bulls {
    background-image: url('/images/bulls.png');
}
 
.icon--lakers {
    background-image: url('/images/lakers.png');
}
 
.icon--celtics {
    background-image: url('/images/celtics.png');
}
 
.icon--pistons {
    background-image: url('/images/pistons.png');
}

For Loop

As in JS, for example, there are also loops here. One of these is the for loop. This can be used in two ways:

from x to y
from x through y

The difference is that with through the following digit also belongs to it.

SCSS

@for $i from 1 through 3 {
    .div-#{$i} {
        width: 2rem * $i;
    }
}

CSS

.div-1 {
    width: 2rem;
}
 
.div-2 {
    width: 4rem;
}
 
.div-3 {
    width: 6rem;
}

While Loop

In this example, a variable (i) with the value 6 has been declared. As long as this variable is greater than 0, the style of the div is changed with the corresponding number.
The width is set to 2em times the value of i. The variable is then reduced by two.

SCSS

$i: 6;
@while $i > 0 {
    .div-#{$i} {
        width: 2em * $i;
    }
    $i: $i - 2;
}

CSS

.div-6 {
    width: 12em;
}
 
.div-4 {
    width: 8em;
}
 
.div-2 {
    width: 4em;
}

Leading games

more possibilities
clean code
works with mixin and variables
nesting
less repetitions in the code

Disadvantages

Code must be compiled:
This adds another step to the development process to the development process. This makes the process slightly longer.
More difficult troubleshooting:
Instead of being able to make changes directly in the CSS file and see the effects immediately on the website, changes in the design must first be translated into CSS. This means that errors can creep in.
This makes debugging more difficult. However, this can be circumvented with a tool.

Conclusion

I found out about SCSS a few weeks ago and was pleasantly surprised. I tried out a few things and think that it makes sense to take the time to learn it.

Tip: I recommend learn-sass to learn the basics of SASS and SCSS.
You can find the Node package here: https://www.npmjs.com/package/learn-sass (opens in a new tab)