The Complete Guide of SASS
Front-end development was initially about writing HTML, CSS, and JavaScript. However, over the last decade or so, it has become more complex and ever more interesting. The field’s continuous evolution has made it increasingly critical to stay on top of the latest front-end technologies and learn how to build websites more efficiently. So in this article, I will dive into what Sass is, how to compile Sass code into regular CSS, and discuss the features that make it so powerful.
What is Sass?
Sass (which stands for Syntactically Awesome Style Sheets) is an extension of CSS. It doesn't really change what CSS can do, you won't suddenly be able to use Adobe Photoshop blend modes or anything-but it makes writing CSS a whole lot easier. Saas includes various features such as variables, nested rules, mixins, inline imports, built-in functions to manipulate color, and other values, all with a fully CSS-compatible syntax.
Why use sass instead of CSS?
CSS has been the best choice of developers over the last few years in web creation. However, since the production of SASS, its use has been significantly reduced. SCSS is an enhanced version of the SASS; therefore, it is more widely used these days. In this article, we will discuss the difference between CSS and SCSS. Before making the comparison, we will know about the CSS and SCSS.
That was the thinking anyway. But the reality is that Sass (and other CSS preprocessors) can be a powerful ally—a tool that any style crafter can easily insert into their daily work. It took me a while to come around, but I’m sure glad that I did.
Benefits of using SASS over CSS
The main advantage of using Sass is to save time and makes writing CSS easier and less redundant. You can use variables for commonly referenced things like color, font family, margin, etc. You change the variable value and it updates everywhere it is referenced.
Sass is a preprocessor for CSS, which makes it essentially the same thing as CSS. Being a preprocessor, you code in Sass, and later the code is compiled into CSS. It functions as an (amazing) power-up for CSS, enabling features that are yet to exist in CSS. Sass’ main goal is to improve maintainability as your stylesheets get larger and more complex. Some handy features Sass provided are:
- Variables : you can store reusable values with variables, this can be handy to store values like color hex code or a font stack.
- Nesting : you can write hierarchical CSS selectors simpler with Sass, just write it in nests just like what we do with HTML elements.
- Partials : you can write your stylesheet in a modular way using partials and import statements, improving your code maintainability and readability.
- Mixins : are like functions that you can define and reuse throughout your stylesheets. For example, sometimes we have to write one declaration for each rendering engine, like border-radius which should be accompanied by -WebKit-border-radius, -Moz-border-radius, and so on. You can group all those border-radius statements into one mixin and just use the mixin whenever you need to define the border-radius for your element. Neat, isn’t it?
- Extension : and Inheritance, which lets you share a set of CSS properties across your stylesheets.
- Mathematical Operators : like +, -, *, /, and % to aid you in determining various numbers throughout your stylesheets.
How to use SASS Variables?
If you never use any of the other capabilities of Sass, v ariables
would be enough to justify the extra step of transpiling your CSS.
We've already looked at why variables are so useful. Now let's take
a closer look at how to declare them.
The basic syntax for defining a variable is simple: Just use a $
before the variable name and treat its definition like a CSS rule:
The following declares a variable named large-font.
$red: #833;
Once it's been declared, you can use the variable just as though you were typing the variable:
body { color: $red;}
How to use SASS Nesting?
Normally HTML is written in a clear nested and visual hierarchy while CSS is not. Sass facilitates you to nest your CSS selector in a way that follows the same visual hierarchy of your HTML. You should very careful while nesting because overly nested rules may cause complexity and proves hard to maintain.
Let's see a nesting example.
SCSS Nesting Syntax:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
When it is processed, it will create a CSS like this. You will see that the ul, li, and selectors are nested inside the nav selector.
CSS Syntax:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
How to use SASS Partials?
SASS/SCSS Partials are the CSS files that contain small CSS code specific for a particular styling separated from the main stylesheet for better managing the CSS code better. These files can be used in another SASS or SCSS file instead of writing the same styles again using the @use at-rule or @forward at-rule with both of them including the stylesheet with different visibility.
SASS Partials provides a great way to organize your CSS code in different files and then use them wherever required.
Do make a stylesheet as Partial in SASS, its name should always begin with _ underscore character, for example, _partial. CSS, etc.
The underscore character as a prefix to the stylesheet name indicates that this is a small chunk of CSS so there is no need to compile this to CSS independently.
Let's take an example.
SCSS Nesting Syntax:
/* src/_corners.class */
$-radius: 3px;
@mixin rounded {
border-radius: $-radius;
}
Now if we import this stylesheet into another stylesheet,
/* style.scss */
@use "src/corners";
.button {
@include corners.rounded;
/* This is an error! $-radius isn't visible outsidersdets of n ers. suss.
*/
padding: 5px + corners.$-radius;
}
What is Mixin and how to use it in SASS?
Mixin is used in Sass, which is a CSS preprocessor. Mixin works as a function in Sass and helps us to reduce the writing same code over and over.
Let's take an example.
@mixin heading-font {
font-family: sans-serif;
font-weight: bold;
}
h1 {
@include heading-font;
}
name: We have to provide the name of our mixin so that we can use it later in the other classes.
parameter: Here parameter is optional, but if we have to use it, we will have a variable with $ sign Ex; $value.
Now let’s understand how we can use mixin in our projects. So first we have to understand that mixin is an exclusive component of SASS, and we will use it in a separate file and then include it in our HTML page. So in the given examples below, we will use the compiled Sass.
Let's take an example.
// Set a default value
$default-padding: 10px;
@mixin pad($n: $default-padding) {
padding: $n;
}
body {
@include pad(15px);
}
What are the Mathematical Operators in SASS?
Sass supports the standard set of mathematical operators for numbers. They automatically convert between compatible units.
- + adds the first expression’s value to the second’s.
- - subtracts the first expression’s value from the second’s.
- * multiplies the first expression’s value by the second’s.
- % returns the remainder of the first expression’s value divided by the second’s. This is known as the modulo operator.
@debug 10s + 15s; // 25s
@debug 1in - 10px; // 0.8958333333in
@debug 5px * 3px; // 15px*px
@debug 1in % 9px; // 0.0625in
Unitless numbers can be used with numbers of any unit.
@debug 100px + 50; // 150px
@debug 4s * 10; // 40s
Numbers with incompatible units can’t be used with addition, subtraction, or modulo.
@debug 100px + 10s;
// ^^^^^^^^^^^
// Error: Incompatible units px and s.
Division
Unlike other mathematical operations, division in Sass is done with the math.div() function. Although many programming languages use / as a division operator, in CSS / is used as a separator (as in font: 15px/32px or hsl(120 100% 50% / 0.8)). While Sass does support the use of / as a division operator, this is deprecated and will be removed in a future version.
Slash-Separated Values
For the time being while Sass still supports / as a division operator, it has to have a way to disambiguate between / as a separator and / as division. In order to make this work, if two numbers are separated by /, Sass will print the result as slash-separated instead of divided unless one of these conditions is met:
- Either expression is anything other than a literal number.
- The result is stored in a variable or returned by a function.
- The operation is surrounded by parentheses, unless those parentheses are outside a list that contains the operation.
- The result is used as part of another operation (other than /).
You can use [list.slash()] to force / to be used as a separator.
@use "sass:list";
@debug 15px / 30px; // 15px/30px
@debug (10px + 5px) / 30px; // 0.5
@debug list.slash(10px + 5px, 30px); // 15px/30px
$result: 15px / 30px;
@debug $result; // 0.5
@function fifteen-divided-by-thirty() {
@return 15px / 30px;
}
@debug fifteen-divided-by-thirty(); // 0.5
@debug (15px/30px); // 0.5
@debug (bold 15px/30px sans-serif); // bold 15px/30px sans-serif
@debug 15px/30px + 1; // 1.5
Units
Sass has powerful support for manipulating units based on how real-world unit calculations work. When two numbers are multiplied, their units are multiplied as well. When one number is divided by another, the result takes its numerator units from the first number and its denominator units from the second. A number can have any number of units in the numerator and/or denominator.
@debug 4px * 6px; // 24px*px (read "square pixels")
@debug math.div(5px, 2s); // 2.5px/s (read "pixels per second")
// 3.125px*deg/s*em (read "pixel-degrees per second-em")
debug 5px * math.div(math.div(30deg, 2s), 24em);
$degrees-per-second: math.div(20deg, 1s);
@debug $degrees-per-second; // 20deg/s
@debug math.div(1, $degrees-per-second); // 0.05s/deg
Sass will automatically convert between compatible units, although which unit it will choose for the result depends on which implementation of Sass you’re using. If you try to combine incompatible units, like 1in + 1em, Sass will throw an error.
// CSS defines one inch as 96 pixels.
@debug 1in + 6px; // 102px or 1.0625in
@debug 1in + 1s;
// ^^^^^^^^
// Error: Incompatible units s and in.
As in real-world unit calculations, if the numerator contains units that are compatible with units in the denominator (like math.div(96px, 1in)), they’ll cancel out. This makes it easy to define a ratio that you can use for converting between units. In the example below, we set the desired speed to one second per 50 pixels, and then multiply that by the number of pixels the transition covers to get the time it should take.
@mixin move($left-start, $left-stop) {
position: absolute;
left: $left-start;
transition: left ($left-stop - $left-start) * $transition-speed;
&:hover {
left: $left-stop;
}
}
.slider {
@include move(10px, 120px);
}
Conclusion
CSS preprocessors revolutionized frontend development. While some designers cannot imagine working without them, others have a skeptical approach towards them. I hope that by bringing closer the topic of preprocessors I encouraged you to give them a chance. Who knows, maybe they become an integral part of your everyday workflow.
Read more blogs here