Understanding Sass Basics With Practical Examples
By: Mehdi Aoussiad
Tags: Coding, Sass, CSS, JavaScript, Web Development

Understanding Sass Basics With Practical Examples

Learn how to use Sass on your projects.

Image created with ❤️️ By Mehdi Aoussiad.

Introduction

Sass stands for Syntactically Awesome Stylesheets. It is a CSS pre-processor that makes it easier to work with CSS, reduce repetition, and save time. This will help to style your pages easily with fewer lines of code. It’s like CSS with superpowers. In addition to that, Sass also has some amazing new features that we will cover in this article. That’s why it’s a good skill to have as a web developer.

In this article, we will learn about some Sass basics that you need to know in order to improve your CSS. Let’s get right into it.

Compiling Sass

Sass works Just like regular CSS, but the browser does not understand it, you will need a Sass pre-processor to convert Sass code into CSS. There is an extension in the popular text editor VsCode called “Live Sass Compiler”, it does all the job for you, just install it from your VsCode and you will be good to go.

Live Sass compiler.

Another way to compile Sass is by using NPM, but you have to make sure that you have Node installed in your system. Once you have done that, you can use the command below in your terminal.

npm install node-sass

Sass comments and variables

Before we start with Sass comments, we will need to create a Sass file. We will use Scss because that’s what most people do. So we create Sass files as we do in CSS, but now make sure to put instead of .css => .scss .

We create Sass comments as we do in JavaScript. Have a look at the example below:

// Sass comments:

// This is a Sass comment.

Variables in Sass are just like properties where you store values to use them again somewhere on your code by calling that variable name. In JavaScript, variables are defined using the let and const keywords. In Sass, variables start with a $ followed by the variable name.

Here is an example:

$main-fonts: Arial, sans-serif;

$headings-color: green;



//To use variables:

h1 {

font-family: $main-fonts;

color: $headings-color;

}

Of course, you can use any variable name you want.

Sass Nesting

Sass allows nesting of CSS rules, which is a useful way of organizing a style sheet. It lets you nest your elements inside other elements in CSS.

Here is an example:

nav {

background-color: red;



ul {

list-style: none;



li {

display: inline-block;

}

}

}

Notice that the style will apply to only the elements that are inside that specific nav in your HTML.

Create reusable CSS with Sass Mixins

In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet. This helps to not repeat the same code over and over again.

We can use mixins in Sass with the keyword mixin . It acts like a Javascript function, where you can put a piece of code and use it everywhere in your file.

Here is an example:

@mixin box-shadow($x, $y, $blur, $c){

-webkit-box-shadow: $x $y $blur $c;

-moz-box-shadow: $x $y $blur $c;

-ms-box-shadow: $x $y $blur $c;

box-shadow: $x $y $blur $c;

}

As you can see, a mixin also accepts parameters as we do with JavaScript functions. The parameters (the $x , $y , $blur , and $c in the example above) are optional. Now any time a rule box-shadow is needed, only a single line calling the mixin replaces having to type all the vendor prefixes.

Now, we can call this mixin by using the include directive.

Have a look at the example below where we called our mixin inside a div element:

div {

@include box-shadow(0px, 0px, 4px, #fff);

}

As you can see, we gave the values for our variables when we called the mixin function.

Use if and else to add logic to your mixin

Sass allows the use of if and else statements as we do with normal JavaScript functions. The directive @ if in Sass is useful to test for a specific case.

Have a look at the examples below:

@mixin text-effect($val) {

@if $val == danger {

color: red;

}

@else if $val == alert {

color: yellow;

}

@else if $val == success {

color: green;

}

@else {

color: black;

}

}

Now you can call that mixin inside an element p as an example:

p {

font-size: 18px;

@include text-effect(danger);

}

// The color will be red.

Sass importing and partials

The main goal of Sass is to help you to not repeat yourself, that’s why they introduced (“@ import and Partials”). These features let you import code from a Sass file to another. This will be useful to not repeat yourself by writing the same code again.

Notice that the name of the Sass file that you gonna import code from needs to start with underscore like this : _style.scss . Then you will have to go to the file where you want to use that imported code and write your import method there with the name of the file you want to import code from( style.scss ). But without the underscore and also without the .scss .

Now, all the code from the file _style.css will be applied to this file.

Sass Inheritance

Sass has a feature called extend that makes it easy to borrow the CSS rules from one element and build upon them in another.

Have a look at the examples below:

.panel{

background-color: red;

height: 70px;

}

Now we can use all the styles of the class(.panel) and apply them to another element using extend .

Here is an example:

.big-panel{

@extend .panel; width: 150px;

font-size: 2em;

}

Conclusion

As you can see, Sass is a powerful tool if you are working a lot with CSS. It makes your life easier, and it helps you to not repeat yourself in CSS. There are a lot more things that Sass can do. You can learn more from their documentation.

Thank you for reading this article, I hope you found it useful.

More Reading