What is Sass
Sass which means Syntactically Awesome Stylesheet is a CSS extension language. A CSS preprocessor which totally gives our CSS superpowers. CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help.
Sass has two syntax; The Indented syntax and The SCSS syntax.
The Indented syntax which uses the file extension, ‘. sass' supports the same features as SCSS syntax but the difference is that it uses indentation. There are other minor differences but I won’t be going into that.
The SCSS syntax which uses the file extension, ‘. scss’ is a superset of CSS. It basically means that all valid CSS is valid Scss. It’s the easiest syntax to get used to and also the most popular.
How to setup in your VsCode
You can setup Sass in your VsCode by easily installing the "Live Sass Compiler" extension. It compiles your Sass files into actual CSS files in runtime.
Features of Sass
Sass lets you use features that don't exist in CSS yet like nesting, mixins, inheritance that make writing CSS fun.
Variables:
CSS now has this variable option as well as Sass. It is just a way you can store values you wish to reuse like colors, fonts. You use the $ symbol for creating variables. Here's an example
$primary-color: 2f2f2f;
body{
color: $primary-color
}
During the compilation, it compiles to actual color value.
Nesting:
Sass helps to nest your CSS styles in order of hierarchy in the HTML. This helps for specificity.
<header class="header">
<p>This is the header</p>
</header>
//Sass
.header{
p{
font-size: 1rem;
}
}
You will notice that the p element is nested inside the header. This is a great way to organize and make your CSS readable.
Mixins:
This feature lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make it flexible. You create a mixin with the @mixin directive and give it a name.
@mixin display{
display: grid;
place-items: center;
}
footer{
@include display;
}
We've used display for the mixin name. You can then use it as a CSS declaration starting with @include followed by the name of the mixin as shown in the example above.
Partials:
You don't have to write all your sass code in one file. Sass lets you create partial Sass files with little code snippets that you can include in other Sass files. Partials are created with a leading underscore with any name you like (e.g _variables.scss). The underscore lets Sass know that it is a partial file. Here's an example
// _variables.scss
html{
padding: 0;
margin: 0;
scroll-behavior: smooth;
}
//main.scss
@use 'variables';
You use the @use directive to import the partial into the main sass file. You can then access every property in it from the main file. Notice there is no underscore or extension name after @ use dieective, Sass figures it out by itself.
Resources
Sass is such an awesome tool that when you get hold of it, you rarely write pure CSS again. Check out: