SASS (Syntactically Awesome Stylesheet) is a CSS preprocessor, which helps to reduce repetition with CSS and saves you a lot of precious time. It makes large and complicated stylesheets clearer to understand and easier to maintain. It is a more stable and powerful CSS extension language that describes the style of document structurally. The following is a crash course that will familiarize you with the basics of SASS in a short time.
Note : You should have the basic knowledge of HTML and CSS before attempting to learn SASS.
How to Get Started
A standard web browser is unable to read the SASS files so they have to be compiled to standard CSS files. You will need some kind of tool to convert .scss files into .css file format. There are multiple ways of doing this :-
- Use an quick online compiler like Sassmeister that converts your files to CSS on the fly.
- Download and Install one of the free or paid applications to your desktop. Here is a handy list to pick from :-
- CodeKit (Paid)
- Compass.app (Paid, Open Source)
- Ghostlab (Paid)
- Hammer (Paid)
- Koala (Open Source)
- LiveReload (Paid, Open Source)
- Prepros (Paid)
- Scout-App (Free, Open Source)
- Install anywhere as a Standalone. You can install Sass on Windows, Mac, or Linux by downloading the package for your operating system from GitHub and adding it to your
PATH. There are no external dependencies and nothing else you need to install. - You can also install SASS using the Node.js Command Line Interface. Here is how you do it
node-sass input.scss output.css
SASS Variables
Like any other programming language, SASS makes use of variables that store value and can be reused when needed. For example you can assign a hex color code into a variable that can be used at multiple places in your CSS file or all the details of a box shadow effect. The benefit of using variables in SASS is that when you update the main variable value, it updates its value everywhere in the CSS file.
Here is a small example of how variables can be used in SASS.
[tabby title=”SCSS”]
$myfont: normal 24px/1.5 ‘Open Sans’, sans-serif;
$mycolor: #FF0000;
$bottomshadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
.title {
font: $myfont;
color: $mycolor;
}
.content {
color: $mycolor;
background: #fff;
width: 100%;
box-shadow: $bottomshadow;
}
[tabby title=”CSS”]
.title {
font: normal 24px/1.5 ‘Open Sans’, sans-serif;
color: #FF0000;
}
.content{
color: #FF0000;
background: #fff;
width: 100%;
box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
}
[tabbyending]
In the above example you can see how the different variables are defined in the beginning of the SCSS file and then reused later when required. The final output can be seen under the CSS tab above, where the actual values of the variables are assigned and CSS is rendered.
SASS Mixins
Mixins are groups of defined variables that behave just like a constructor class and can be reused when required. Mixins can even accept arguments with the option to set default values. Check out the following example that helps you understand how Mixins work. Different classes can be defined with variable values referencing the same Mixin properties.
[tabby title=”SCSS”]
@mixin overlay($bgcolor) {
width: 100%;
height:100%;
background-color:$bgcolor;
bottom: 0;
left: 0;
position: absolute;
}
.black-overlay {
@include overlay(rgba(0,0,0,0.7));
}
.white-overlay {
@include overlay(rgba(255,255,255,0.7));
}
[tabby title=”CSS”]
.black-overlay{
width: 100%;
height:100%;
background-color:rgba(0,0,0,0.7);
bottom: 0;
left: 0;
position: absolute;
}
.white-overlay{
width: 100%;
height:100%;
background-color:rgba(255,255,255,0.7);
bottom: 0;
left: 0;
position: absolute;
}
[tabbyending]
SASS Extend
The @extend feature lets you inherit the CSS properties from one selector to another selector. It allows classes to share a set of properties with one another. This is similar in nature to a Mixin system but is used to create a logical connection between the elements on a page. Here is a quick example of how @extend works and the CSS that is rendered :-
[tabby title=”SCSS”]
.foo {
color: black;
border: 1px solid black;
}
.bar {
@extend .foo;
background-color: red;
}
[tabby title=”CSS”]
.foo, .bar {
color: black;
border: 1px solid black;
}
.bar {
background-color: red;
}
[tabbyending]
If you check out the CSS version of the code, you will see that Sass combined the selectors instead of repeating the same declarations over and over, saving us precious memory.
SASS Nesting
SASS lets you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Its a neat feature that gives you a clear overview of the whole CSS structure without missing on vital information. Refer to the following example for nesting technique :-
[tabby title=”SCSS”]
ul {
list-style: none;
li {
padding: 15px;
display: inline-block;
a {
text-decoration: none;
font-size: 16px;
color: #444;
}
}
}
[tabby title=”CSS”]
ul {
list-style: none;
}
ul li {
padding: 15px;
display: inline-block;
}
ul li a {
text-decoration: none;
font-size: 16px;
color: #444;
}
[tabbyending]
If you switch to the CSS tab of the code window, you will see how SASS defines all the CSS structure based on the nesting in SASS. Saves a lot of time.
SASS Functions
SASS comes with a lot of in-built functions that you can use to perform various tasks. You can find the complete list of SASS functions here. On top of the predefined functions, you can also define your own functions. Here is an example :-
[tabby title=”SCSS”]
$myblue: #2196F3;
a {
background-color: $myblue;
}
a:hover {
background-color: darken($myblue,10%);
}
[tabby title=”CSS”]
a {
background-color: #2196F3;
}
a:hover {
background-color: #0c7cd5;
}
[tabbyending]
In the above example, we define a variable that has the blue color hex code and then using the SASS function darken, we darken the blue color on the hover property.
Benefits of Using SASS
- SASS helps you to write clean, easy and less CSS in a programming construct.
- It is more stable, powerful, and elegant because it is an extension of CSS. So, it is easy for designers and developers to work more efficiently and quickly.
- It is compatible with all versions of CSS. So, you can use any available CSS libraries.
- It provides nesting so you can use nested syntax and useful functions like color manipulation, math functions and other values.
- It lets you use reusable color scheming.
