Syntactically awesome style sheets (Sass) is a popular CSS extension language. The language has been in existence for around 15 years. It works well with every version of CSS, making it compatible with every CSS library and framework, from Bootstrap to Foundation.
The language allows you to write Sass code and then compile that code into CSS. The value of using Sass instead of plain CSS is that it provides additional features that are currently outside the scope of CSS.
In this tutorial, you’ll learn how to use Sass and its most important features.
Installing Sass
There are several ways to use Sass on your device. These include running an application (such as LiveReload or Scout-App), downloading Sass from GitHub, or installing it using npm.
Installing Sass With npm
To install Sass using npm you’ll need to install NodeJS and npm on your device. Then you’ll need to create a package.json file (which is a good practice when installing any npm package in your projects). You can create a basic package.json file in your project directory with the following terminal command:
npm init -y
Executing this command will generate a package.json file with the following content:
{
"name": "my_app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
The package.json file is important because it serves as configuration for your project. Each time you install a new npm package the package.json file will reflect this.
Now you can install Sass by inserting the following command into your terminal:
npm install sass
This command will update the package.json file by creating a new dependency field, which will contain the new Sass package. It will also generate a new package-lock.json file and install sass (plus dependencies) into a node_modules directory.
The Different Types of Sass File
A Sass file can have one of two extensions, .sass or .scss. The main difference between them is that the .scss file uses curly braces and semicolons (much like CSS), while the .sass file structures CSS using indentation (much like Python). Some developers prefer to use the .scss file as its structure is closer to CSS.
A .scss File Example
$primary-color: blue;
body {
color: $primary-color;
p {
color: red;
}
}
A .sass File Example
$primary-color: blue
body
color: $primary-color
p
color: red
Compiling a Sass File to CSS
You can compile an individual Sass file using the sass command-line program:
sass file.scss > file.css
You can also run sass across all files within a specific directory:
sass scss:dist/css/
That command compiles all Sass files within the scss directory and stores the resulting files in dist/css.
If you're using npm, you can set up a convenient shortcut for sass compilation using the scripts field in your package.json file:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"sass": "sass --watch scss:dist/css/"
},
This configuration uses the --watch option. It keeps sass running and ensures it recompiles those files whenever they change. For each file, sass will generate a .css and a .css.map file.
To execute the Sass script above you’ll need to execute the following command in your terminal:
npm run sass
Running that command will generate output similar to this:
> my_app@1.0.0 sass C:\Users\kadeisha\Documents\my_app
> sass --watch scss:dist/css/
Compiled scss\main.scss to dist\css\main.css.
Sass is watching for changes. Press Ctrl-C to stop.
Sass Variables
You can create variables in CSS today, but 15 years ago CSS variables did not exist, so Sass support for them was valuable. Sass variables operate in much the same way that CSS variables do. They store values (such as colors) that you intend to use throughout a CSS file. One of the main benefits of variables is that they allow you to update many occurrences of a value by changing it in just one place.
Each Sass variable starts with the dollar sign, followed by any combination of characters. Try to make your variables descriptive, like the $primary-color example above. It’s important to note that a Sass variable doesn’t compile into CSS variables. For example, this .scss file:
$primary-color: blue;
body {
color: $primary-color;
}
Will compile to the following CSS:
body {
color: blue;
}
As you can see from the file above there are no CSS variables. The advantage of variables is that any alteration made to the Sass file will update the corresponding CSS file.
Sass Mixins
If you have one property that you wish to use several times throughout your project, then a variable is great. But if you have a group of properties that you wish to use as a unit, a mixin will do the trick.
Every mixin starts with the @mixin keyword, followed by the name that you want to assign to the mixin. You have the option of passing variables to the mixin as parameters and using those variables within the body of the mixin, in much the same way as a function.
Using a Mixin
@mixin light-theme($primary-color: white, $secondary-color: #2c2c2c) {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background-color: $primary-color;
color: $secondary-color;
}
#home {
@include light-theme(blue);
}
The first thing that you might notice in the code above is that the mixin accepts two arguments. You can assign default values to arguments and override them when you include it.
After you’ve created your mixin, you can use it in any section on your website using the @include keyword followed by the name of the mixin.
Compiling the Sass code above will generate the following CSS code in your destination file:
#home {
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
background-color: blue;
color: #2c2c2c;
}
Sass Functions
Apart from the different keywords, the main difference between a function and a mixin is that a function must return something. You can use Sass functions to calculate values or perform operations.
@function add-numbers($num-one, $num-two){
$sum: 0;
$sum: $num-one + $num-two;
@return $sum
}
This function above accepts two numbers and returns their sum. Sass functions can even contain if statements, for loops, and other control flow statements.
Sass Modules
If you had to include all your variables, mixins, and functions in the same file, you’d have a massive Sass file when creating large applications. Modules provide a way to split large files into smaller ones that sass combines during compilation. For example, you can have a function module and a mixin module, all you need to remember is the @use keyword.
Here’s an example showing how you can separate the previous mixin into its own file:
The mixins.scss File
@mixin light-theme($primary-color: white, $secondary-color: #2c2c2c) {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background-color: $primary-color;
color: $secondary-color;
}
The main.scss File
@use 'mixins';
#home{
@include mixins.light-theme;
}
To import and use an external file as a module, you’ll need to use the @use keyword to import it. Then, to use a specific mixin from the imported file, prefix the specific mixin name with the file name followed by a period. Compiling the files above will generate the following CSS code:
#home {
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
background-color: white;
color: #2c2c2c;
}
Use Sass to Extend and Organize Your CSS
Sass is an extension of CSS's syntax. It allows you to streamline your style sheets and manage them more efficiently. But you'll still need to have a command of CSS and web design principles to create effective designs.
This article teaches you how to install and use Sass. You’ve learned how to create Sass variables, mixins, functions, and modules. Now all that’s left for you to do is create an HTML document and watch your Sass code come to life.