What is SASS
Sass stands for "Syntactically Awesome Stylesheets." It is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself.
Sass extends the CSS by adding features like variables, nested rules, and mixins. This allows for more modular, maintainable, and organized stylesheets. It also introduces concepts like inheritance and control directives, which are not present in standard CSS. We create sass files with an extension of '.scss'
Features of SASS
Sass Variables
You can store common styles in sass variables like colors, font-sizes, widths, etc. You can make a common 'variable.scss' file and store all necessary variables in it. So that you can use it later wherever you need it.
$font-size: 12px;
$white-color: white;
h1 {
font-size: $font-size;
color: $white-color;
}
Nesting
Nesting in Sass refers to the practice of placing selectors inside one another in a way that mirrors the structure of the HTML. This makes the CSS more readable and helps organize styles in a logical hierarchy.
CSS code
nav {
background-color: #333;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
The resulting SCSS code
nav {
background-color: #333;
ul {
list-style-type: none;
padding: 0;
li {
display: inline-block;
margin-right: 10px;
}
}
}
As you can see, we nested all the elements inside one another, just like in HTML. This makes the code more readable and understandable.
Mixins
A mixin in Sass is a way to group together a set of CSS declarations and reuse them throughout your stylesheet. It's like a function in programming, allowing you to define a set of styles once and apply them multiple times in different parts of your code.
Here's an example of a basic mixin in Sass:
//You can pass paramters to a mixin.
@mixin border-radius($radius) {
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
}
.button {
// To use a mixin you need to use @include and then the mixin name.
@include border-radius(5px);
background-color: #007bff;
color: #ffffff;
}
After compilation of the above SCSS file into CSS it will just replace the mixin with its code by putting paramter value at appropriate places.
Control Directives - @if, @else if, @else
The @if, @else if, and @else control directives in Sass allow you to apply styles conditionally based on certain conditions. They work similarly to conditional statements in programming languages.
@mixin select-width($device) {
.button {
@if $device == "mobile" {
width: 90%;
}
@else if $device == "laptop" {
width: 70%;
}
@else {
width: 60%;
}
}
}
Control Directive - @for
The @for control directive in Sass allows you to iterate over a range of values and generate styles based on those values. It works similar to a for loop in programming languages.
Syntax
//end is excluded if you use "start to end"
@for $var from (start) to (end) {
// Styles to apply
}
//end is included if you use "start through end"
@for $var from (start) through (end) {
// Styles to apply
}
Example
@for $i from 1 through 3 {
.p-#{$i} {
font-size: 10px + $i * 2;
}
}
The resulting CSS would look like this:
.p-1 {
font-size: 12px;
}
.p-2 {
font-size: 14px;
}
.p-3 {
font-size: 16px;
}
Control Directive - @while
The @while directive in Sass allows you to create a loop that continues as long as a specified condition is true. It's similar to a while loop in many programming languages.
Syntax
@while <condition> {
// Styles to apply
}
Example
$var: 1; // Initialize a variable just like other programming languages.
//Set a condition
@while $var<=3 {
.div-#{$var} {
width: 100px * $var;
}
// Increment the var
$var: $var+ 1;
}
The resulting CSS would look like this:
.div-1 {
width: 100px;
}
.div-2 {
width: 200px;
}
.div-3 {
width: 300px;
}
Control Directive - @each
The @each directive in Sass allows you to loop over lists or maps and apply styles for each item in the list or map. It's a powerful feature that enables you to generate repetitive styles based on a set of values.
Syntax For List
@each $var in (list) {
// Styles to apply
}
Example
$colors: red, green, blue, yellow;
@each $color in $colors {
.element-#{$color} {
background-color: $color;
}
}
Syntax for Map
@each $key, $value in (Map) {
// Styles to apply
}
Example
$font-sizes: (
small: 12px,
medium: 16px,
large: 20px
);
@each $size, $value in $font-sizes {
.font-#{$size} {
font-size: $value;
}
}
Control Directive - @extend
The @extend directive in Sass is used for inheritance, allowing one selector to inherit the styles of another selector. This can help reduce duplication in your stylesheets and make your code more maintainable.
Syntax
.selector {
property: value;
@extend .other-selector;
}
Example
.button-1 {
border-radius: 10px;
color: white;
background-color: green;
}
.button-2 {
@extend .button-1;
font-size: 15px;
font-weight: bold;
}
Partials And Importing
In Sass, a partial is a Sass file that is intended to be imported into another Sass file. It's a way to break up your stylesheets into smaller, more manageable pieces. Partial files in Sass are denoted by an underscore _ at the beginning of the filename.
For example, you can create a common _variables.scss partial file and use it wherever you want. You can also create a common _mixins.scss file which contains all the mixins
For importing partial files you need to use @import directive with name of file in quotes. You don't include the underscore or the file extension in the import statement.
@import 'variables';
@import 'mixins';
In conclusion, Sass is a powerful tool that can greatly enhance your CSS workflow. Its features, such as variables, nesting, mixins, and more, allow for more maintainable and organized stylesheets.
You can suggest any topics you think I should include in the above blog by leaving a comment💬. If you found my article useful, please give it a like❤.