What is SASS
- SASS is a CSS preprocessor, which allows us to design web pages and websites in a rapid manner.
- SCSS is a superset of CSS, where the coding style looks similar to CSS but in SASS the coding style differs.
There are multiple ways to install SASS, I’ll guide you
with three options.
- VS CODE PLUGIN (only applicable for VS Code users).
npm install node-sass
gem install sass
A developer named Ritwick Dey developed a plugin called Live Sass Compiler
usage is simple, just click
watch my sass button
This plugin watches for live changes and upon save it generates css file.
pretty simple though !
As you have noticed that VS code plugin usage is simple, like that node compilation is also pretty straight-forward,
sass input.scss output.css
in the above code input.scss is the input file and the output.css is the compiled CSS file.
So the setup process is over, lets get our hands dirty now by going further.
Note: Throught this article I will use SCSS style format
In this tutorial we will use npm method
create a sample.scss
when you compile the example with following command,
sass sample.scss output.css
two files will be
you will get the following content in
But the thing that
sass --watch input.scss output.css
In general, variables are used to store data and to use them whenever needed. Like that in SASS variables can be used to store color codes, font sizes, font stacks. To use variables $ symbol is to be prefixed. variables also introduced in new version of CSS.
Consider the below exapmle for declaring and accessing variables,
From the above example, we declared two
the above SASS stylesheet will be compiled to
$blue are converted into their respective values
- Data types supported by SASS are
- list of values
- function references
Nesting is another cool feature which saves lots of time in identifying the difference between parent and child elements or blocks.
Lets have an example,
Normally in CSS what we do is call all the parent nodes to style the child,
but with the help of SASS, we can nest child nodes inside the parent node, Which increases readability.
With the given example we can understand that SASS code is better organized and presented in
And a cool thing is that we can also nest CSS properties,
The above code will copile into CSS as follows,
We all obbessed with nesting right, but there is a darkside to it. If we use so many levels it will affect our code and it will be hard to maintain, hard to read and also increases file size.
So it is advisable to keep less than 4 levels of nesting.
Partials are snippets of SASS, Partials helps us in modularizing the code. A partial is a SASS file named with a leading underscore.
_colors.scss And partial files can’t be ported to CSS directly. We need to import partial files into main SASS file to port them into browser understandable CSS format.
@import is used to import partial files into a manifest file.
Partials help us in reusability of code, we can import in other projects, thus saving a lot of designing time. For example, if we are okay with a button style then we can create a
_button.scss file and use wherever we want.
Imports are used to import the partial files into the manifest file. To import a partial
@import directive is used. In CSS import will perform HTTP re request to rceive files whereas in SCSS it imports only the requird content directly into the manifest file. Lets import the files mentioned in manifest as,
In the above import statements we didn’t added file extension
.sass because SASS is smart enough to identify its partials.
Mixins are also reusable block of codes. With the help of mixins we can able to create custom block of codes to overcome the repeating patterns. For example mentioning vendor prefixes is a real pain but with the help of mixins we can create a block of code that can be used throughout the style sheet .
to create a mixin
@mixindirective is used, followed by mixin name.lets have an example
let’s break down the code, mixin directive is followed by the name and curly braces. then vendor prefixes are assigned with the
the CSS code will look like,
Inheritance / Extend
One of the remarkable features in SASS is inheritance. Inheritance or Extend helps us in creating shared styles, which can be inherited or extended whenever needed.
Let us have an example, to understand inheritance concept we create a shared style for buttons,
In the above snippet,
.button section is a shared section, which is used by the default,success and danger buttons.
.button style contains the height, font-size and border properties of a button.
.button-default extends the shared style and adds extra properties which is specific to it. Like wise specific properties were added to danger and success buttons.
The CSS code for the above SASS snippet is,
There are some some pros and cons in using inheritance
- Inheritance allows reusability of code
- reduces the number of HTML class
- does not accept arguments (instead of inheritance use mixins)
- does not support media queries
Using math operators like +, -, *, /, and % in CSS is fun and useful in many cases. Using operators is as same in other languages but we cannot apply arithmetic operators on different units. for
The above code will compile as,