SASS, which stands for Syntactically Awesome StyleSheets, is a CSS extension language. It includes functionality that aren't available in standard CSS, making it easier to simplify and maintain your projects' style sheets. There are various features, such as, variables, nested CSS, mixins, functions, etc.
In this guide, We will be covering following topics,
- SASS Variables
- Nest CSS
- Mixins
@Ifand@elselogic@forSASS loop- Using
@each @whileloop- Partials
- Extend
SASS Variables
Similar to JavaScript, SASS uses variables. Variables can be declared and used to store data. In JavaScript, to declare a variable let and const keywords are used. Similarly, In SASS, $ is used before the variable name. For example,
$primary-color: blue;
$headings-font: Arial, sans-serif;
And to use these variables,
h1 {
font-family: $headings-font;
color: $primary-color;
}
Extending the above example, if multiple elements have been styled using the $primary-color variable and if the color needs to be changed from blue to red, the only place to change to code is the variable value. This makes the SASS variable useful.
Nest CSS
In CSS, parent or child, each element is targeted on a different line. For example,
ul {
list-style-type: none;
}
ul li {
display: inline-block;
margin: 5px;
}
ul li a {
text-decoration: none;
}
For a large project with multiple lines of code, this can get confusing. SASS provides a useful way of organising a style sheet through nesting of CSS rules. It is done by placing the child style rules inside the respective parent style rules. For example, the above CSS rules can be written like this-
ul {
list-style-type: none;
li {
display: inline-block;
margin: 5px;
a {
text-decoration: none;
}
}
}
Mixins
In SASS, a mixin is a collection of CSS declarations that can be reused throughout the style sheet. It can become tedious if vendor prefixes are involved. For Example, when vendor prefixes were used in CSS property box-shadow, one had to write box-shadow property like this.
div {
-webkit-box-shadow: 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 4px #fff;
-ms-box-shadow: 0px 0px 4px #fff;
box-shadow: 0px 0px 4px #fff;
}
This is a lot of typing for every element having box-shadow property. It is also tedious to check different values for different effects. With the help of SASS mixins, the same code can be written as-
@mixin box-shadow($x, $y, $blur, $c){
-webkit-box-shadow: $x $y $blur $c;
-moz-box-shadow: $x $y $blur $c;
-ms-box-shadow: $x $y $blur $c;
box-shadow: $x $y $blur $c;
}
Mixins work like functions. They start with @mixins followed by a custom name. Parameters are optional here. To call a mixin, @include directive is used as a CSS declaration-
div {
@include box-shadow(0px, 0px, 4px
, #fff);
}
The above code is just one example where all the heavy typing is reduced to one line of code and can be used to style multiple elements and different arguments can also be given making it more flexible.
@If and @else logic
@if directive is used for conditional styling. If the statement is true, one style is applied, if false, another style is applied. If you are familiar with JavaScript (or any other language), It is similar to the if statement in JavaScript.
@mixin bg-color($bool) {
@if $bool == true {
background-color: blue;
}
}
Also, just like in JavaScript, @else if and @else are used to test more conditions
@mixin myColor($num) {
@if $num > 0 {
color: green;
}
@else if $num == 0 {
color: black;
}
@else $num < 0 {
color: red;
}
}
@for SASS loop
Yes, similar to JavaScript for loop. It adds style in a loop.
@for is used in two ways- first, 'start through end' and second, 'start to end'. the difference between the two is, 'start to end' excludes the end number while counting. while, 'start through end' includes the end number.
A 'start through end' example,
@for $i from 1 to 6 {
.text-#{$i} {font-size: 10px * $i}
}
#{$i} is the syntax to merge text with the i variable to make a string. After converting the file to CSS, It will look this,
.text-1 {
font-size: 10px;
}
.text-2 {
font-size: 20px;
}
...
.text-4 {
font-size: 60px;
}
Using @each
@each directive is used to iterate over an item in a list. The variable gets assigned the current value from the list or map on each iteration.
@each $color in red, yellow, green {
.#{$color}-bg {
background-color: $color;
}
}
A map(holds key-value pairs where the keys can be any datatype) has a little different syntax.
$colors : {color1: red, color2: yellow, color3: green}
@each $key, $color in $colors {
.#{$color}-bg {
background-color: $color;
}
}
Here, $key is important to reference the keys in the map $colors. Without it, the CSS property value would have color1, color2, etc. With the help of @each, the above examples will translate into CSS like this,
.red-bg {
background-color: red;
}
.yellow-bg {
background-color: yellow;
}
.green-bg {
background-color: green;
}
@while loop
Guessed it right! Again, similar to JavaScript! Here, a style is applied until a condition is met. The example we did in the @for directive section, We can get the same result using @while directive.
$i: 1;
@while $i < 7 {
.text-#{$i} {font-size: 10px * $i;}
$i: $i + 1;
}
Here, while variable $i is less than 7, it will declare the font-size property according to the value of $i. The value of $i is incremented by 1 to avoid an infinite loop.
Partials
Partials are separate files in SASS that hold together segments of CSS code. These files are imported and used in other Sass files.
Partial names begin with the underscore (_) character, indicating to Sass that it is a tiny portion of CSS that should not be converted into a CSS file. The .scss file extension is also used for Sass files. To import the partial's code into another Sass file, @import directive is used.
For example, If you have a partial file named _mixins.scss containing all the mixins code, then to import it into the main.scss file, this is how we will use it.
@import 'mixins'
While importing partials, the underscore before the name and extension is not needed. This is how Partials help make the stylesheet more organized by grouping similar codes together into a module.
Extend
Extend feature in Sass helps in borrowing the CSS rules from one element and using it in another. This will be easy to understand through an example. Here's a class .box which has some base CSS rules.
.box {
height: 100px;
width: 100px;
border: 1px solid black;
}
Now, we want to style another element having class .styled-box which will have the same CSS rules as the .box and some other CSS properties too. We can copy the base rules from .box but that is not the most convenient way. With the help of Extend directive, we can reuse the CSS rules written for one element and build upon them in another.
.styled-box {
@extend .box;
background-color: blue;
box-shadow: 0px 0px 4px #fff;
}
Conclusion
Sass is a great way to keep your style sheet organized. We learned some of its basic features. For more advanced lessons, do read the official documentation.