SASS Variables

This article explains SASS variables.

We will provide a detailed explanation of SASS variables and learn their actual usage step-by-step.

YouTube Video

SASS Variables

SASS is a CSS extension language that allows you to write CSS more flexibly and efficiently. Among its features, variables are a powerful tool for maintaining style consistency while making changes easier.

What are SASS Variables?

SASS variables provide a way to store values like colors, font sizes, and spacing used frequently in CSS, allowing them to be managed in one place.

By using variables, you can easily change styles and improve code readability.

How to Write Variables

Variables can be written as follows.

1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;

• You need to prefix the variable name with the $ symbol.
• variable-name is the name of the variable. It is recommended to give it a clear and descriptive name.
• value is the value assigned to the variable.

Basic Usage of Variables

Below is a basic example of a SASS variable.

 1// Variable definition
 2$primary-color: #3498db;
 3$secondary-color: #2ecc71;
 4$base-font-size: 16px;
 5
 6// Variable usage
 7body {
 8    font-size: $base-font-size;
 9    color: $primary-color;
10    background-color: $secondary-color;
11}

• Once you define a variable such as $primary-color, you can reuse the same value as many times as you like.
• When changing a value, you only need to modify the variable definition, improving maintainability.

Generated CSS Output

1body {
2    font-size: 16px;
3    color: #3498db;
4    background-color: #2ecc71;
5}

Using Variables within Nesting

Combining SASS nesting with variables helps organize your code and makes it easier to manage.

 1@use "sass:color";
 2
 3// Variable definition
 4$button-bg: #e74c3c;
 5$button-color: #fff;
 6$button-padding: 10px 20px;
 7
 8.button {
 9    background-color: $button-bg;
10    color: $button-color;
11    padding: $button-padding;
12
13    &:hover {
14        background-color: color.adjust($button-bg, $lightness: -10%);
15    }
16}

• You can use variables inside nested selectors.
• By combining variables, you can achieve flexible styling, such as making a color 10% darker using the color.adjust function.

Generated CSS Output

1.button {
2    background-color: #e74c3c;
3    color: #fff;
4    padding: 10px 20px;
5}
6
7.button:hover {
8    background-color: #c0392b;
9}

Variables with Default Values

In SASS, you can set default values for variables. Setting default values allows you to use variables without overwriting existing ones.

1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8    font-size: $font-size;
9}

• By adding !default, the variable will not be overwritten if it is already defined.
• This is useful in team development or for project-wide settings.

Generated CSS Output

1p {
2    font-size: 16px;
3}

Variable Scope

SASS variables have scope, and their availability depends on where they are defined. Understanding scope helps prevent unintended overwriting of variables.

1. Global Scope

1$global-color: #ff6347;
2
3.header {
4    color: $global-color;
5}

• Variables in the global scope are available throughout the entire file.

2. Local Scope

1.card {
2    $card-bg: #f0f0f0;
3    background-color: $card-bg;
4}
5
6.button {
7    // Error: $card-bg cannot be used
8    background-color: $card-bg;
9}

• Variables in the local scope are only available within a specific nesting or file.

Using Variables in Calculations

SASS variables can also be used in calculations. Calculations can be performed on unit-based values and colors as well.

 1@use "sass:color";
 2
 3$base-padding: 10px;
 4$double-padding: $base-padding * 2;
 5
 6.container {
 7    padding: $double-padding;
 8}
 9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14    color: $lighter-color;
15}

Generated CSS Output

1.container {
2    padding: 20px;
3}
4
5h1 {
6    color: #5dade2;
7}

• Using variables for color adjustments or spacing calculations improves maintainability.

Summary

SASS variables are an essential feature for efficient CSS management and maintenance.

Using SASS variables helps maintain consistent styles across the entire project and makes changes easier.

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