Basics of SASS

This article explains the basics of SASS.

We will explain the basic features of SASS step by step and demonstrate how to use them with practical sample code.

YouTube Video

Basics of SASS

SASS (Syntactically Awesome Stylesheets) is a stylesheet language that extends CSS. By using SASS, you can take advantage of advanced features not available in CSS, such as variables, nesting, mixins, and inheritance. This makes stylesheet management and reuse much easier.

What is SASS?

SASS is a language that simplifies CSS writing while enabling more flexible and powerful styling. SASS also offers the SCSS (Sassy CSS) syntax, which is similar to standard CSS syntax. Here is an example:.

SCSS Example

1$base-font: Arial, sans-serif;
2$bg-color: #f4f4f4;
3
4body {
5    font-family: $base-font;
6    background-color: $bg-color;
7}

CSS Example

1body {
2    font-family: Arial, sans-serif;
3    background-color: #f4f4f4;
4}

Setting Up SASS

How to Install

To use SASS, first install Node.js and then install SASS using the following command:.

1npm install -g sass

How to Compile

To compile SASS files (.scss or .sass) into CSS, use the following command:.

1sass input.scss output.css

You can also use the watch option to monitor file changes and perform real-time compilation.

Variables

SASS allows you to use variables to reuse values like colors and font sizes.

Sample Code

1$primary-color: #3498db;
2$font-stack: 'Roboto', sans-serif;
3
4body {
5    color: $primary-color;
6    font-family: $font-stack;
7}

• This code uses SASS variables to define colors and fonts, and reuses them within the body selector to enhance consistency and maintainability.

Compiled Result

1body {
2    color: #3498db;
3    font-family: 'Roboto', sans-serif;
4}

Nesting

SASS improves code readability by allowing CSS selectors to be nested.

Sample Code

 1nav {
 2    ul {
 3        list-style: none;
 4        margin: 0;
 5        padding: 0;
 6
 7        li {
 8            display: inline-block;
 9
10            a {
11                text-decoration: none;
12                color: #333;
13
14                &:hover {
15                    color: #3498db;
16                }
17            }
18        }
19    }
20}

• This code uses nested hierarchy to visually clarify the structure of the styles.

Compiled Result

 1nav ul {
 2    list-style: none;
 3    margin: 0;
 4    padding: 0;
 5}
 6
 7nav ul li {
 8    display: inline-block;
 9}
10
11nav ul li a {
12    text-decoration: none;
13    color: #333;
14}
15
16nav ul li a:hover {
17    color: #3498db;
18}

Mixins

Mixins allow you to reuse code across multiple selectors.

Sample Code

 1@mixin border-radius($radius) {
 2    border-radius: $radius;
 3    -webkit-border-radius: $radius;
 4    -moz-border-radius: $radius;
 5}
 6
 7button {
 8    @include border-radius(10px);
 9}
10
11.card {
12    @include border-radius(5px);
13}

• This code defines a border-radius style using @mixin and reuses it in button and .card using @include, enabling efficient styling without duplication.

Compiled Result

 1button {
 2    border-radius: 10px;
 3    -webkit-border-radius: 10px;
 4    -moz-border-radius: 10px;
 5}
 6
 7.card {
 8    border-radius: 5px;
 9    -webkit-border-radius: 5px;
10    -moz-border-radius: 5px;
11}

Inheritance (@extend)

Inheritance lets you apply existing styles to other selectors.

Sample Code

 1%button-style {
 2    padding: 10px 20px;
 3    color: white;
 4    background-color: #3498db;
 5}
 6
 7button {
 8    @extend %button-style;
 9    border: none;
10}
11
12.link-button {
13    @extend %button-style;
14    text-decoration: none;
15}

• This code defines a placeholder selector %button-style and uses @extend to apply common styles to both button and .link-button, promoting reuse and consistency.

Compiled Result

 1button, .link-button {
 2    padding: 10px 20px;
 3    color: white;
 4    background-color: #3498db;
 5}
 6
 7button {
 8    border: none;
 9}
10
11.link-button {
12    text-decoration: none;
13}

Conditionals and Loops

SASS supports conditionals and loops to dynamically generate styles.

Example of Conditional Statement

1$theme: dark;
2
3body {
4    background-color: if($theme == light, #fff, #333);
5    color: if($theme == light, #333, #fff);
6}

• This code uses SASS's if function to switch background and text colors based on the $theme value, enabling dynamic style generation through conditionals.

Example of Loop

1@for $i from 1 through 3 {
2    .column-#{$i} {
3        width: calc(100% / $i);
4    }
5}

• This code uses a SASS @for loop to dynamically generate classes from .column-1 to .column-3.

Compiled Result

 1body {
 2    background-color: #333;
 3    color: #fff;
 4}
 5
 6.column-1 {
 7    width: 100%;
 8}
 9
10.column-2 {
11    width: 50%;
12}
13
14.column-3 {
15    width: 33.3333%;
16}

File Splitting and Importing

SASS allows you to split files and reuse them using @use or @import.

File Structure

styles/
  _variables.scss
  _mixins.scss
  main.scss

_variables.scss

1$primary-color: #3498db;

_mixins.scss

1@mixin flex-center {
2    display: flex;
3    justify-content: center;
4    align-items: center;
5}

main.scss

1@use 'variables';
2@use 'mixins';
3
4header {
5    background-color: variables.$primary-color;
6    @include mixins.flex-center;
7}

Compiled Result

1header {
2  background-color: #3498db;
3  display: flex;
4  justify-content: center;
5  align-items: center;
6}

Summary

Using SASS streamlines CSS writing and improves code reusability and maintainability.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video