Adding SASS to your Webpages
This article focuses on the features of nesting and variables in SASS
Table of contents
Hello World. Let's learn about SASS and why you should use it.
Introduction
Syntactically Awesome Style Sheets (SASS) is a preprocessor to Cascading Style Sheets(CSS). SASS is a language that extends and adds upon the features available in CSS. Browsers unfortunately do not understand SASS scripts so they are compiled down to CSS so they can used on the webpage being displayed.
The SASS is transpiled into CSS using a transpiler, one such transpiler is the implementation of SASS using Dart. dart-sass
is the implementation that always gets the latest features first.
SASS has two syntaxes, the original version being the indented syntax which uses the extension .sass
. The SCSS version is similar to CSS and uses the .scss
extension. SCSS is called the superset of CSS since all CSS is valid SCSS and this familiarity allowed it to be adopted much more easily.
Some of the features that SASS offers are
- Nesting
- Variables
- Modules
- Mixins
- Loops (for, while, each)
- Conditional Statments (if & else)
- Extending styles
In this article we will look at nesting and variables. All examples in this article follow the SCSS syntax.
Nesting
SCSS allows users to nest selectors just as one nest tags in HTML
Taking an example of the following HTML
<nav>
<a>
Title
</a>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
The above HTML is styled using the CSS on the left but the same CSS can be rewritten in SASS using nesting where we know that the <ul>
and <a>
tag is nested inside <nav>
.
CSS | SCSS |
---|
|
|
SASS however compiles the CSS differently. Let's have a look at how it's compiled. The table below shows how the selectors are combined by taking the outer with the inner selector.
SCSS | CSS |
---|
|
|
A helpful tip from SASS documentation itself
Nested rules are super helpful, but they can also make it hard to visualize how much CSS you’re actually generating. The deeper you nest, the more bandwidth it takes to serve your CSS and the more work it takes the browser to render it. Keep those selectors shallow!
A helpful tip that I've read is to keep the nesting upto a maximum of 4 levels that way it keeps the selectors shallow as the documentation suggests.
SASS Nesting works with selectors as well
SCSS | CSS |
---|
|
|
Variables
SASS supported the use of variables much before CSS did but since then CSS has gained support for variables and they are called custom properties.
Let's have a look at SASS variables.
SCSS variables are compiled and replaced wherever they are placed as shown in the table below.
SCSS | CSS |
---|
|
|
Example of the imperativeness of SASS Variables: If values are updated they do not update the previous use of the variable.
SCSS | CSS |
---|
|
|
Let's have a look at the difference between SASS and CSS variables as described by their documentation.
SCSS | CSS |
---|
Sass variables are all compiled away by SASS. This means the variables are not included in the CSS output once compiled. | CSS variables are included in the CSS output. |
Sass variables only have one value at a time. | CSS variables can have different values for different elements |
SASS variables are imperative, which means if you use a variable and then change its value, the earlier use will stay the same. | CSS variables are declarative, which means if you change the value, it’ll affect both earlier uses and later uses. |
Conclusion
We've just seen how two of the features of SCSS can be used to make writing CSS easier. Nesting makes it easier to understand the CSS being applied to the HTML and Variables make it easier to avoid repeated typing of values in the SCSS file. Let's have a look at some more of the features that SASS provides in the next post.