Sass (Aron) - pmvdbijl7/matching-app GitHub Wiki

Sass

What is it?

Sass is a preprocessor scripting language that is compiled into CSS. A preprocessor is a program that processes its input data to produce output that is used as input to another program. The output is said to be a preprocessed form of the input data, which is often used programs like compilers.

Why use Sass

The Sass syntax has been developed to keep large and complicated style files organized. This is the case, because users can use the concept of Object Oriented Programming (OOP) with Sass. This means that you can develop your code into smaller packages. A few other examples of the usage of Sass are that you can use variables, for example, for colors. Because the colors are defined in one place as variables, you can be sure that you use the same colors everywhere. If you ever want to change a color, you only have to change it in one place.

In the example, you can see the way variables can be used with Sass.

$mainYellow: #EDB530;

h1 {
        color: $mainYellow;
    }

Another example that you can use with Sass is the concept of nesting. You can nest child elements into parent elements to keep your code organized but also to type less code. See the example below.

section {
    background-color: red;
    p {
        font-size: 0.2rem;
        &:first-of-type {
            font-size: 1.2rem;
        }
        &:last-of-type {
            font-size: 3rem;
        }
    }

Sass used in our project

My first step to use Sass, was to install the live Sass compiler in VS Code. This will turn the Sass code into CSS, because the browser can't read Sass.

Knipsel

The next step that I took was I created a style.scss file and I wrote some code in this file. With the activation of the live Sass compiler, there will be a style.css and a style.css.map generated. This is necessary, because this will turn your Sass code into css. After these tasks were completed, I was able to write Sass.

Our style directory is the image below. I divided the code into multiple files to stay organized.

Knipsel

I also used variables to use our theme colors as efficient as possible.

Knipsel

And ofcourse, I also used the concept of nesting.

Knipsel

Resources: