SASS

What is SASS?

SASS is a preprocessor to CSS which prevents code repetition and saves time with its exclusive features.

Whenever we are working on big projects, we look for languages, frameworks, and extensions that are time-efficient, browser-friendly, and have a good developer community for support. CSS plays a big part in making a lot of chic websites and web apps that we use today. But, it can be lengthy to code thousands of lines, where many lines get repeated often & some have nested properties.

To deal with some of these problems, SASS comes into the picture. SASS is an extension to CSS that works as a preprocessor. SASS stands for Syntactically Awesome Style Sheets and is compatible with all versions of CSS. It has in-built variables, nested rules, mixins, & much more that makes the coding process simpler.

SASS Syntax

SASS is the older syntax. The newer syntax is referred to as SCSS.

| The syntax looks like:

Why Use SASS?

SASS is known for an easy-to-learn syntax, organized style sheets, and is stable.

Learning anything will take time and effort. If you already know CSS, why should you spend time mastering SASS? Let’s look at some of the reasons why SASS stands out and makes it better than CSS:

1. More organized & modularizes our style sheets: SASS is capable of doing what CSS does but in less code. Hence, it is more efficient and boosts developers’ productivity.
2. Easy to learn syntax: For CSS developers, it is easy to adopt SASS as the functionality & a lot of syntaxes are identical to CSS.

3. Reusable code: With SASS’ unique features, the code can be reused in different places through distinct methods making it time-saving.
4. Divide & conquer: When the project gets large, using CSS in one file or 20 files is not suggested. Using the import function in SASS, it is easier to maintain and navigate through different portions of our stylesheet.
5. Customize Bootstrap 4: Yes, you heard it right! With the knowledge of SASS, we can also customize bootstrap 4. Many famous front-end frameworks are created by SASS including, Bootstrap & Foundation.
6. Large developer community and well-documented: For a language to be used by masses, a developer community & documentation play a vital role. Fortunately, SASS has covered us on that part and has a lot of resources for anyone to become an expert. Check out the Sass Community of GitHub.

Let’s look at a simple example and understand how SASS is useful:

Every website has some primary colors that need to be used often. Here we take three primary colors:

Salmon - #FA8072
DarSalmon - #E9967A
LightSalmon - #FFA07A

Being the primary colors, these will need to be defined a lot of times in CSS. Instead of mentioning the same properties again & again, we initialize them using variables in SASS.

In the above example, we have used variables for defining color of different HTML elements. Now the hustle of remembering the hex codes & typing them again and again is no more there.

How Does SASS Work?

Through the process of transpiling, SASS code is converted into CSS code. The two directories known as the input and output folder contain the SASS and css files respectively.

SASS has its unique syntax that it converts into CSS. The process of giving a code in SASS language and getting it back in CSS is known as transpiling. The CSS output that comes from the interpretation is used by web browsers. It is needed as a browser cannot understand SASS code.

File & Folder Structure

How a project’s files are structured depends on the developer. Here, we will be looking at the most common way that is suitable for beginners. While coding a project, there are many nested folders with different files. A basic structure of a project will look like:

There are three folders here, my_project, CSS, and sass. The my_project directory has an HTML file, CSS folder, and sass folder. The CSS folder has a file created during the compilation of SASS. The SASS directory has three files indicating different purposes for each of them.

The directory which contains our SASS files is known as the Input folder. After compilation, the CSS directory is called the Output folder.

It is recommended to create different files of SASS where each file has one of the many features that the framework is famous for. For example, having separate files for mixins as shown in the above structure. This way code readability increases & collaboration gets easier.

Example

In this section, we look at an example of how transpiling works. We will also understand the file structure by looking at the SASS and CSS files.

The code mentioned below simply makes variables of some properties & assigns them to some HTML elements:

Now, this code gets compiled through sets up of SASS that should be pre-installed in your local machine. After compilation, there will be two CSS files automatically created. The CSS file containing the interpretation of the CSS code will look something like this:

This code will appear familiar to those who know CSS. In such a small code snippet, the difference of using SASS can be disguising and seem minimal. But it will make a huge difference otherwise. How can you confirm? By getting your hands on it right away.

Features of SASS

SASS offers six main features: variables, nesting, partials, import, mixins, and operators.

We learned and saw so much about what SASS is. This section focuses on real-life examples of the usage of unique features of SASS. SASS provides six main distinctive properties that make it developer-friendly:

We’ll look at each function in detail. Let’s start with variables.

Variables

Like in all programming languages, SASS offers variables for CSS properties. While coding CSS, there was so much repetition of the same values like primary colors, size of elements, etc. With variables in SASS, the problem of retyping and repeating ourselves is solved.

Here, we look at an example of the usage of variables. Let’s look at the sass file first:

The CSS output file will be:

Here the variables font-stack & primary-color are replaced with the actual values.

Nesting

As beginners, nesting can be confusing to use. It reduces code lines but can work reverse if not executed carefully.

There are two ways to use nesting:

1. Based on CSS Selectors
2. Based on CSS properties

1) Based on CSS Selectors

It works similarly to CSS. Let’s look at an example to understand in a better way:

Here we are accessing HTML elements like ul, li, and an inside the nav HTML element. If we compile this file, the CSS code generated will be as follows:

Here we prevent retyping nav again and again. We have grouped child elements of the nav tag making our stylesheet more organized and easier to navigate. Let’s look at how to nest CSS properties.

2) Based on CSS Properties

There are a lot of CSS properties with the same prefix. Some examples of such properties are:

1. Font: family, size, weight.
2. Background: color, image, size, repeat.

Now with SASS, we can prevent using our prefixes repeatedly and can nest them in the following way:

The interpreted CSS file will look like:

These properties can be omitted from writing often by using mixins. We’ll look at it sometime later.

Partials

There can be a lot of style sheets in our project. Some style sheets that are imported into one another do not necessarily be transpiled. Remember, transpiling is the process of converting Sass code to CSS code. Now how do we make our Sass compiler understand which files to interpret and which ones should it not take into consideration? Partials come into the picture here.

Partial is a mechanism used to name SASS files starting with an underscore so the compiler does not interpret them.

The syntax for the same is: _filename When are partial SASS files used? With SASS, our stylesheets are modularized and easier to navigate. So we prefer to make separate stylesheets for different purposes. We are aware of the importance of fonts in our project. We can make a separate partial SASS file for them and import that file wherever needed.

The name of the file below is "_fonts.sass":

We can simply import this file and use the variable names to use the CSS properties at different places when needed. How to import files? Let’s look at it now.

Import

To link two stylesheets, we can import one file into another file. Using the @import directive, Sass imports all the partial files into the current file. We need to note that we usually import partial files only. This is to prevent them from transpiling. Hence, as developers, we make a connection between our files in a way that only the important files are compiled. The rest are imported to the main stylesheets.

The syntax of this is: @import “filename”; As we can see in the syntax, we need not include underscore and the file extension. Let’s look at a partial file named “_fonts.sass” as used in the previous section:

We want to import this partial file into our main stylesheet: “main.sass”. Here we see how to do it:

In Line 1, we are importing our fonts file using the syntax. At Line 2, we use the properties declared in our fonts file by using the variables. NOTE: With every @import directive we use, we are generating an HTTP request.

Mixins

Mixins are similar to functions that can be reused multiple times in our files. It prevents code redundancy & promotes code reusability, hence, saving time and boosting the productivity of a developer. While using mixins, there are two major things to keep in mind:

1. Defining a mixin
2. Using a mixin We will look at both of these steps in detail, starting with the declaration of it.

1) Defining a Mixin

Like in any other programming language, we have functions with parameters & without parameters, mixin provides similar functionality.

Let’s look at the syntax of mixin:

Remember, parameters are optional. Now that we have defined a syntax, let’s look at two types of mixins:

1. Mixin without parameters
2. Passing variables to mixins Both types have their relevance & it’s on us to decide the best out of two in any given situation.

1) Mixin without parameters

Let’s start with a simple example:

Here, we have declared a mixin named “heading-text.” Inside the mixin, we declared CSS properties that we will be using for all our headings. NOTE: In SASS, underscores and hyphens are considered the same. So in the above example, heading-text and heading_text will be taken as the same mixin.

2) Passing variables to Mixins

Variables are useful in cases where the properties defined are similar & the values of those properties differ at all times. In this example, we take two arguments in the mixin:

We are defining the font-family properties for the paragraph in our file. Now that we know how to pass arguments in mixins, we should also be aware of the default values our parameters can have. The mechanism used in SASS is similar to what we have in other programming languages. The default values are used in cases when no value is passed. Taking the above example and passing default values to it:

By default, our function will consider 14px as the size and Helvetica, sans-serif as the font family when no value is passed. It is beneficial when the defined default value is used mostly & it needs to be changed very little in our project.

2) Using a Mixin

As seen before, we have two types of mixins: with and without arguments. In this section, we’ll be looking at the usage of both kinds. To call a mixin and include the properties defined, we make use of the @import directive. The syntax is as follows:

Using the include directive, we can mention both kinds of mixins in our selectors. Now we take three examples to use all the different kinds of mixin.

Example 1

We start with defining a mixin:

Now to include this mixin in one of the heading selector, we use the @include directive:

Now the CSS output will look something like:

This way we include mixins without parameters in our SASS files.

Example 2

Now that we are aware of how to include the general mixins, we look at examples of passing variables to mixins with and without default values. For the same, we declare a mixin with default values:

We use the above mixin in the below manner:

Here we have first changed both the default values for the navbar class. And in the note class, we are only changing the color property. The CSS output of the above file will be:

The width of the border of the note class is the same as the default value as it was not changed & no value was passed for that parameter.

Example 3

We end with a fascinating property: nested mixins. It is possible to group many mixins into a single mixin using the @include directive. In this example, we mention the mixins used in example 1 with some added properties:

To use the “main-text” mixin in our sass file, we do it as shown below:

The CSS output will be:

NOTE: In nested mixins, including mixins that have arguments is prohibited.

Operators

With SASS, we can use mathematical operators and work our way around while using operands in our stylesheets. SASS supports all kinds of operators:

Let’s look at an example which uses some of the operators:

In the above example, we made use of arithmetic and comparison operators. Similarly, we can use equality and logical operators. The CSS output of the above code will be:

Operators are useful in a lot of different cases. For example: if we want to combine the height of two elements, in another element we can use the + operator.

Other

Apart from the already discussed features, SASS provides in-built functions to manipulate different CSS properties. SASS provides seven unique set of functions:

1. String Functions - str-length(string), to-lower-case(string), etc.
2. Numeric Functions - abs(number), random(), etc.
3. List Functions - index(list, value), length(list), etc.
4. Map Functions - map-values(map), map-keys(map), etc.
5. Selector Functions - simple-selectors(selectors), selector-append(selectors), etc.
6. Introspection Functions - content-exists(), type-of(value), etc.
7. Color Functions - red(color), hue(color), etc. These are just a few to name, the list goes on & the usage of each of them makes SASS even more productive.

How Does SASS Help CSS Work More Like a Programming Language?

With features like variables, nested properties, SASS contributes to CSS work more like a programming language.

There’s always a hot debate going around CSS - whether it is a programming language or not. While CSS is meant to only provide instructions to the browser, it is not used to perform decision-making tasks. It also does not have variables and other in-built functions that are usually present in a programming language.

Through SASS, CSS works more like a programming language. SASS has extensive features along with some nested rules, ways to organize stylesheets & help developers make style-related decisions.

Who Should Learn SASS?

Developers aspiring to become front-end engineers should use SASS to increase the chances of hiring.

Everyone looking to build a career as a front-end engineer needs SASS. Even if companies will not have a specific requirement of SASS, knowing it can make you a preferred candidate. Why? Because SASS makes CSS more efficient in terms of organization and performance.

Apart from the expertise in HTML, CSS, and JavaScript, SASS is an unfair advantage that front-end engineers can use to be more likely to get hired.

How to Learn SASS?

SASS is recommended to learn after good knowledge of CSS.

Being a preprocessor to CSS, it is recommended to learn CSS before getting into SASS. Let us look at some reasons:

1. Knowing CSS will give you an edge while understanding some similar features that SASS gets from CSS.
2. It’ll be relatively easier to learn SASS if the foundational knowledge of CSS is strong.
3. SASS is just a preprocessor to CSS. In the end, CSS files are used by the browser. The working of CSS can help you in this process.

Now that we have some points as to why we should learn CSS before SASS, let’s go and look into some advantages and disadvantages of SASS.

Advantages & Disadvantages of SASS