Variable declaration with $ in SASS

Introduction

Variables let you store values like colors or sizes to reuse them easily in your styles. Using $ helps you keep your code neat and change things quickly.

When you want to use the same color in many places and might change it later.

When you have a font size or spacing value used repeatedly in your design.

When you want to organize your styles by naming important values clearly.

When you want to avoid typing the same value multiple times and reduce mistakes.

Syntax

SASS

$variable-name: value;

Start variable names with $ followed by letters, numbers, underscores, or hyphens.

Assign a value with a colon : and end with a semicolon ;.

Examples

This creates a variable named $primary-color with a blue color value.

SASS

$primary-color: #3498db;

Stores a font size value to use later in your styles.

SASS

$font-size: 1.5rem;

Defines a spacing size variable for consistent gaps or margins.

SASS

$spacing-large: 2rem;

Sample Program

This example shows how to declare variables for a main color and padding. Then it uses them inside a button style. The button changes color a bit when hovered.

SASS

@charset "UTF-8";

$main-color: #e74c3c;
$padding: 1rem;

.button {
  background-color: $main-color;
  padding: $padding;
  color: white;
  border-radius: 0.5rem;
  font-weight: bold;
}

.button:hover {
  background-color: darken($main-color, 10%);
}

Important Notes

You can change the variable value once, and all places using it update automatically.

Variables make your code easier to read and maintain.

Use meaningful names so you remember what each variable is for.

Summary

Variables start with $ and store reusable values.

They help keep your styles consistent and easy to update.

Use variables for colors, sizes, spacing, and more.