Hello.

Well, for some reason I've been putting myself off from learning SASS/SCSS even though it is widely used and in demand. But since now I am working on improving my HTML, CSS and Vanilla JS skills, so I thought why not!

I decided to get started with the challenges on Frontend mentor but first, I learnt something new.

This is a short 20 min course that I referred as reading the documentation was making me feel sleepy. But always go for the documentations first!

So here are the key take aways from the course -

1. The SASS compiler and extension

So this seems to be an awesome extension for VS Code. So can find it here. It is called "Live SASS Compiler". Looking at the number of installs, seems to be widely used.

So this extension is continuously watching your SASS files for changes, and if any changes occur, it compiles your SASS files into CSS - because browsers can only understand CSS and not SASS - and also adds appropriate prefixes for supporting various functionalities (like flex) across browsers.

2. Variables

Variables are simple to define in SASS. Variable names should always begin with a $ and then you can write something appropriate to justify that variable's usage.

$background: #ffffff;

Do note, that these are different from CSS variables. SASS variables are imperative. If you use a variable and then change its value, it won't change where you have used it previously.

2. Mixins

Don't we love functions? When we can separate a commonly used block of code and call again and again, why write the entire thing again!

Mixins are functions in SASS. They allow you to reuse styles just like functions. To define a mixin, you start with an identifier @mixin followed by the name of the mixin.

@mixin flexCenter {}

Just like functions, you can also pass different values to mixins for more flexibility. For example, consider the following mixin - flexCenter - its task is to apply a flexbox to a container and center items but flex direction can be either row or a column.

@mixin flexCenter($direction) {
    height: 100vh;
    display: flex;
    flex-direction: $direction;
    justify-content: center;
    align-items: center;
}

Once you have defined your mixin, to add them in a style, you can use @include followed by the mixin name passing on values if any.

header{
    @include flexCenter(column);
}

Also, just like in functions we can assign a default value for the arguments, we can do that here as well.

@mixin flexCenter($direction: row) {
    height: 100vh;
    display: flex;
    flex-direction: $direction;
    justify-content: center;
    align-items: center;
}

3. Nesting styles

You can nest styles easily in SASS/SCSS.

header{
    background: rgb(100, 100, 177);
    height: 100vh;

    button {
        background-color: $primaryButton;
        &:hover{
            background-color: red;
        }

        &::after{
            content: "hello";
        }
    }
}

4. Interpolation

String interpolation has always made my life easy. We can do that here also. In JavaScript, we perform interpolation using ${} but here we do it with #{}.

Following is an example from the docs.

@mixin corner-icon($name, $top-or-bottom, $left-or-right) {
  .icon-#{$name} {
    background-image: url("/icons/#{$name}.svg");
    position: absolute;
    #{$top-or-bottom}: 0;
    #{$left-or-right}: 0;
  }
}

@include corner-icon("mail", top, left);

5. Extends

Using mixins is one option to share styles. Another is called extends. Say you have a class that has some specific styles and you define another one that will be using the same styles but with some extra features or modifications.

You can either use mixins to separate the style block and just apply where ever needed or you can extend the class having that style to the new class (class and extends - kinda reminds me of inheritance 😆).

.some-container{
    //some styles
    height: 100px;
    width: 70px;
}

.another-container{
    @extend .some-container;
    width: 100px;
}

6. Operators

We also have operators our usual operators. I am not going into this as you must be aware operators from JS or any other language. But just as an overview, following is what we have-

1. unary operators not, +, -, and /
2. *, /, and %
3. >, >=, < and <=
4. == and !=
5. and (boolean AND)
6. or (boolean OR)
7. =

Conclusion

It was interesting in learning SASS/SCSS today. I will be playing with this a lot more. As of now I am using styled-components in my React applications but I will definitely try a React app with SCSS once I a done playing.

As I said, this was my first hands-on on SASS/SCSS. Let me know what I have understood is correct and if not, please do let me know the right concept.

Cheers! 🍺