What is Sass CSS? What is Sass used for?

If you are a web developer, you’ve probably worked with CSS a lot. Initially, you are amazed by its capabilities, but soon, it becomes a love-hate relationship. It takes up too much of your time to spin up the MVP of your side project. Here is where Sass comes in. Built-in 2006, it’s one of the most predominant CSS Preprocessors used by many developers. But before deep diving into Sass, let’s know what CSS Preprocessors are.

So, what is a CSS Preprocessor?

A CSS preprocessor is a tool you can use to create your stylesheets. It’s like a language you can use to write your CSS.

A preprocessor allows you to write modular CSS, which means that it’s easier to maintain your stylesheets over time because they’re not in one file. And because they’re in separate files, you can easily swap out different versions of the same stylesheet if needed.

For example, imagine having a single stylesheet containing your site’s design elements and colors. But sometimes, you want to change the font size or background color of an element on the page. With a preprocessor, it would be easy to write new versions of these stylesheets that include those changes without changing any other code besides those specific lines in your main stylesheet.

What actually is Sass?

Sass is a CSS preprocessor (processor, compiler, or tool) that compiles your rules before they are included in the output code using the Ruby programming language. It allows you to mix multiple style sheets into one file, which saves you a lot of time writing and maintaining them.

You may have heard the term “Sass” before, but if you’re not sure what it means or why it’s so great, here’s a quick rundown:

SASS is an acronym for Syntactically Awesome Style Sheets. Its purpose is to produce well-formatted CSS files that other tools can compile at run time to generate optimized CSS output. You can use Sass to change how your website looks without having to write any code. Sass is a CSS (Cascading Style Sheets) extension that adds significant features like variables, mixins, and functions to your project, allowing you to construct more reusable stylesheets.

Syntax

Sass has two syntactic options:

SCSS (Sassy CSS): It utilizes the .scss file extension and, with a few exceptions, is entirely CSS syntax compatible. It is widely used since it’s as though writing CSS.

The Indented Syntax (Sass): It utilizes indentation instead of the syntactic sugar of brackets and semicolons. Although it is not consistent with CSS syntax, it is faster to develop. It has the file extension .sass.

Why use Sass?

Easier to write and maintain CSS

Sass is more organized than CSS because it uses a tree-based syntax and can be written in any order, unlike CSS, which is based on the cascade rule where you have to write your styles in the order they get applied. This makes Sass code much easier to read and understand.

Get started with Sass faster

If you understand the fundamentals of CSS, utilizing Sass, particularly the .scss syntax, will be simple because most of the syntax is identical to vanilla CSS.

Pretty handy and reusable

Sass code is reusable. If you come up with a design idea in Sass, you can reuse it elsewhere in your website or app because of its nesting capabilities.

It is quite stable

Sass is stable. Because huge teams use Sass for their projects, it has been tested more than any other CSS preprocessor.

How to use it?

Because Sass is a preprocessor, we must compile it to vanilla CSS because the web browser can not read Sass files. Depending on your technology stack, several methods exist to integrate Sass.

Command Line

According to their documentation, this is the approved way to use and compile

Pre-requisites installed on your system.

Node
NPM

You can install Sass directly on Windows, Linux or Mac with minimal effort.

Just install Sass by using npm by giving the command.

npm install -g sassCode language: SCSS (scss)

Once you’ve installed Sass, you can use the sass command to compile your Sass to CSS. You must indicate which file to build from and where Sass should be exported to CSS. For example, you may make a folder called scss and place your Sass file within it as styles. scss. Then you create another folder called CSS where you store the compiled output, i.e., the Sass converted to CSS file. To do this, give the command:

sass --watch scss/styles.scss css/styles.cssCode language: SCSS (scss)

By giving this command, Sass will keep track of all the changes you’ve made, and upon hitting save, it will compile and re-write the output CSS.

VS Code Extension

Another alternative, if you use VS code, is installing the Live Sass Compiler. You may then create an scss folder and a.scss file within it, and there will be a watch sass button on the bottom right. By simply clicking the button, The extension will compile your scss file to a style.css file and keep a watch for all the changes upon saving.

Note: Don’t forget to link your regular CSS to the HTML doc.

Variables

When Sass was initially released, the major buzz was about variables that could hold property values and use the variable name across the code. This was a big step since if you wanted to say change a color, you just needed to change it in one place rather than copy-pasting it across the whole file. To define a variable in Sass, use the dollar symbol ‘$’ followed by the variable name, a colon, and the value. Let’s see it with an example:

$primaryBtn: salmon;
header button{
color: $primaryBtn;
}
.contact button{
color: $primaryBtn;
}Code language: SCSS (scss)

This will get compiled into CSS like:

header button{
color: salmon;
}
.contact button{
color: salmon;
}Code language: CSS (css)

Nesting

Nesting and nesting rules are powerful features of Sass. Nesting is the ability to organize code into levels. It’s a common pattern in CSS, and it’s used to create reusable blocks of code that can be easily interleaved with other elements. The most obvious use case is nesting a series of class names, but the same nesting can be applied to any code: mixins, functions, variables, and even other Sass rules.

Nesting is a powerful feature that allows you to create complex CSS structures quickly. The main benefit is that you avoid writing out long lists of selectors for each element in your stylesheet. Instead, you can nest everything inside a parent selector and write only one rule per level. For example, let’s take the above code:

$primaryBtn: salmon;
$backgroundColor: lightBlue;

header{
background: $backgroundColor;
}

header button{
color: $primaryBtn;
}Code language: SCSS (scss)

Instead of repeating the header button, we can directly write it inside the header like:

$primaryBtn: salmon;
$backgroundColor: lightBlue;

header {
 background: $backgroundColor;
  button {
   color: $primaryBtn;
  }
}Code language: SCSS (scss)

This code will be compiled in the same way, and the output CSS will be:


header{
background: lightBlue;
}
header button {
color: salmon;
}Code language: CSS (css)

There’s more. Suppose you want to target pseudo selectors and give values based on that you can use ‘&’ and add the pseudo selector.

Let’s understand it better with an example:

$primaryBtn: salmon;
$backgroundColor: lightBlue;

header{
background: $backgroundColor;
  button{
   color: $primaryBtn;
    &:hover {
     background: $backgroundColor;
     }
  }
}Code language: SCSS (scss)

This code will be compiled as follows:

header{
background: lightBlue;
}

header button {
color: salmon;
}

header button:hover {
background: lightBlue;
}Code language: CSS (css)

Partials

Partials help create reusable and abstract blocks of styles. They are also an excellent way to keep your styles DRY and modular.

Partials in Sass is a simple concept. You declare a partial by creating a file preceding an underscore. For example, ‘_header.scss’, then you can use that partial later in the same file or another file.

You can then import the file using @use and the file name.

@use 'header';
//css codeCode language: SCSS (scss)

Mixins and functions

Mixins are modular, reusable blocks of code that can be mixed into other files. They are like a mini-program or function in your Sass files. You can then use these mixins anywhere in your project without importing them from another file. Mixins allow you to create reusable code and keep related functionality in one place. This makes it easy to reuse code across multiple projects and makes working on different parts of your project easier.

How to create a mixin

It’s very easy to create a mixin, type @mixin, and give it a name; inside the curly braces, add the properties and values.

For example,

@mixin flexCenter{
display: flex,
align-items: center;
justify-content: center;
flex-direction: row;
}
header{
@include flexCenter();
}Code language: SCSS (scss)

Suppose you want to change the properties, like from row to column, so you can do that as well by giving parameters, here’s how:

@mixin flexCenter($direction) {
display: flex,
align-items: center;
justify-content: center;
flex-direction: $direction;
}
header{
@include flexCenter(row);
}Code language: SCSS (scss)

You can also add in conditional logic, for example:

@mixin theme($themeColor) {
@if $theme == 'light' {
background-color: $background-light;
} @else {
background-color: $background-dark;
}
}Code language: SCSS (scss)

Operators

You can operate on values using arithmetic operators like + - * /, and it will work just perfectly

header {
width: 100% - 20%;
}Code language: SCSS (scss)

This will be compiled as follows:

header {
width: 80%
}Code language: CSS (css)

You can also use multiple operations.

Conclusion

To conclude, Sass is a powerful and flexible language for writing CSS. It has a clean syntax that’s easy to learn and use, and it’s built on top of the same core engine as CSS.

Sass is not a replacement for CSS; instead, it’s a powerful addition to your toolbox. Sass will increase productivity by making your stylesheets easier to write and maintain. You’ll learn how to use plugins to extend Sass and create features like variables, mixins, nesting, inheritance, and more.