Introduction

This tutorial aims to introduce and explain the concept of variables in SASS/SCSS and how they can be declared and used in styles. By the end of this tutorial, you should be able to understand the purpose of variables, how to declare them, and how to use them within your SASS/SCSS stylesheets.

Prerequisites:
- Basic knowledge of CSS
- Familiarity with SASS/SCSS is beneficial but not necessary.

Step-by-Step Guide

What are SASS/SCSS Variables?

SASS/SCSS variables are a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. SASS uses the $ symbol to make something a variable.

Declaring Variables

Declaring a variable in SASS/SCSS is quite simple. You start with a $ followed by the variable name, a : and then the value of the variable.

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

Here, we've declared two variables: $font-stack and $primary-color.

Using Variables

To use a variable, you simply include the variable name in the value position of a property.

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Code Examples

Let's see some practical examples:

Example 1: Basic Usage of Variables

// Declaring Variables
$color-primary: #fc6;
$color-secondary: #6cf;

// Using Variables
body {
  background-color: $color-primary;
  color: $color-secondary;
}

// The compiled CSS will be:
body {
  background-color: #fc6;
  color: #6cf;
}

In this example, we've declared two color variables and used them as the background and text color of the body element.

Example 2: Using Variables with CSS Properties

// Declaring Variables
$border-width: 4px;
$border-style: solid;
$border-color: red;

// Using Variables
.div {
  border: $border-width $border-style $border-color;
}

// The compiled CSS will be:
.div {
  border: 4px solid red;
}

In this example, we've declared three variables related to a border property and used them in a shorthand border property.

Summary

• SASS/SCSS variables allow us to store reusable values.
• Variables are declared using the $ symbol followed by the variable name, a :, and then the value of the variable.
• Variables can be used as the value of a property.

To continue learning, you might want to explore more complex uses of variables, such as using them in functions or mixins.

Practice Exercises

Exercise 1: Declare a variable $base-font-size with a value of 16px and use it to set the font-size of the body element.

Solution:

$base-font-size: 16px;

body {
  font-size: $base-font-size;
}

Exercise 2: Declare three variables for a box-shadow property ($shadow-offset, $shadow-blur, $shadow-color) and use them to set the box-shadow of a .box class.

Solution:

$shadow-offset: 2px 2px;
$shadow-blur: 5px;
$shadow-color: rgba(0, 0, 0, 0.2);

.box {
  box-shadow: $shadow-offset $shadow-blur $shadow-color;
}

Keep practicing with different CSS properties and values to get a solid understanding of SASS/SCSS variables.