Css style

What is Sass? Learn how to use this CSS extension language

Syntactically Awesome Style Sheets (Sass) is a popular CSS extension language. The language has been around for about 15 years. It works well with all versions of CSS, making it compatible with all CSS libraries and frameworks, from Bootstrap to Foundation.

The language lets you write Sass code and then compile that code to CSS. The point of using Sass instead of plain CSS is that it provides additional functionality that is currently outside the scope of CSS.

In this tutorial, you will learn how to use Sass and its most important features.


Install 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 GitHubor by installing it using npm.

Install Sass with npm

To install Sass using npm, you need to install NodeJS and npm on your device. Next, you will need to create a package.json file (which is good practice when installing any npm package in your projects). You can create a base package.json file in your project directory with the following terminal command:

npm init -y

Running 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"
}

USE VIDEO OF THE DAY

the package.json is important because it serves as the configuration for your project. Every time you install a new npm package, the package.json the file will reflect that.

You can now install Sass by inserting the following command in your terminal:

npm install sass

This command will update the package.json file by creating a new one dependency field, which will contain the new Sass package. This will also generate a new package-lock.json file and install sass (plus dependencies) in a node_modules phone book.

The different types of Sass files

A Sass file can have one of two extensions, .toupee Where .scss. The main difference between them is that the .scss uses braces and semicolons (much like CSS), while the .toupee CSS file structures using indentation (much like Python). Some developers prefer to use the .scss file because its structure is closer to CSS.

An example .scss file

$primary-color: blue;
body {
color: $primary-color;
p {
color: red;
}
}

An example .sass file

$primary-color: blue
body
color: $primary-color
p
color: red

Compile a Sass File to CSS

You can compile an individual Sass file using the toupee command line program:

sass file.scss > file.css

You can also run sass on all files in a specific directory:

sass scss:dist/css/

This command compiles all Sass files in 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 scenarios 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 –Look option. It keeps sass running and makes sure it recompiles these files whenever they change. For each file, sass will generate a .css and one .css.map file.

To run the Sass script above, you will need to run the following command in your terminal:

npm run sass

Running this command will generate output similar to this:

> [email protected] sass C:UserskadeishaDocumentsmy_app
> sass --watch scss:dist/css/
Compiled scssmain.scss to distcssmain.css.
Sass is watching for changes. Press Ctrl-C to stop.

SassVariables

You can create variables in CSS today, but 15 years ago CSS variables didn’t exist, so Sass support for them was invaluable. Sass variables work much the same as CSS variables. They store values ​​(such as colors) that you intend to use in a CSS file. One of the main advantages of variables is that they allow you to update many occurrences of a value by changing it in one place.

Every Sass variable begins with a dollar sign, followed by any combination of characters. Try to make your variables descriptive, like the $primary-color example above. It is important to note that a Sass variable does not compile to 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 in the file above, there are no CSS variables. The advantage of variables is that any changes made to the Sass file will update the corresponding CSS file.

Sass Mixins

If you have a property that you want to use multiple times throughout your project, a variable is ideal. But if you have a group of properties that you want to use as a unit, a mixin will do.

Each mixin starts with the @mixin keyword, followed by the name you want to assign to the mixin. You have the ability to pass variables to the mixin as parameters and use those variables inside the body of the mixin, much like a function.

Use a mixer

@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 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 them.

After creating your mixin, you can use it in any section of 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

Besides 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 were to include all your variables, mixins and functions in the same file, you would have a massive Sass file when building large apps. Modules provide a way to split large files into smaller files that Sass combines when compiling. For example, you can have a function module and a mixin module, all you need to remember is the @use keyword.

Here is 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 must use the @use keyword to import it. Then, to use a specific mixin from the imported file, prefix the name of the specific mixin with the filename followed by a period. Compiling the above files 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 the CSS syntax. It allows you to streamline your style sheets and manage them more efficiently. But you’ll still need to master CSS and web design principles to create effective designs.

This article teaches you how to install and use Sass. You learned how to create Sass variables, mixins, functions, and modules. Now all you have to do is create an HTML document and watch your Sass code come to life.


css tips and tricks

8 Essential CSS Tips and Tricks Every Developer Should Know

Read more


About the Author