Sass Variables

A Sass variable stores a value, such as a colour or a size, so you can reuse it everywhere in your styles.

Creating a Variable

A variable name starts with a dollar sign $. Give it a value with a colon, just like a CSS declaration:

$primary: #2563eb;
$text-dark: #1f2937;
$font-main: "Poppins", sans-serif;
$space: 16px;

body {
  font-family: $font-main;
  color: $text-dark;
}

.card {
  padding: $space;
  margin-bottom: $space * 2;
  border-top: 4px solid $primary;
}

body {
  font-family: "Poppins", sans-serif;
  color: #1f2937;
}

.card {
  padding: 16px;
  margin-bottom: 32px;
  border-top: 4px solid #2563eb;
}

The variables themselves do not appear in the CSS. Sass replaces each one with its value.

Why Use Variables?

• One place to change: if the brand colour changes, edit one line
• No mistakes: you do not have to remember or copy a long colour code
• Clear names: $danger is easier to understand than #dc2626

What Variables Can Hold

You will meet lists and maps again in the chapter on functions and loops.

Maths with Variables

Sass can do maths with numbers: +, -, * and division with math.div(). To use math.div(), load the math module with @use at the top of the file.

@use "sass:math";

$base: 16px;
$columns: 3;

.title {
  font-size: $base * 1.5;
  margin: $base + 4px;
}

.column {
  width: math.div(100%, $columns);
}

.title {
  font-size: 24px;
  margin: 20px;
}

.column {
  width: 33.3333333333%;
}

Variable Scope

A variable made at the top level of a file is global: you can use it anywhere below. A variable made inside a rule is local: it only exists inside that rule's curly brackets.

$color: blue;

.header {
  $color: green;
  color: $color;
}

.footer {
  color: $color;
}

.header {
  color: green;
}

.footer {
  color: blue;
}

The local $color inside .header does not change the global one, so .footer stays blue.

Default Values with !default

!default sets a value only if the variable does not already have one. Libraries like Bootstrap use it so you can set your own values before loading them.

$gap: 10px !default;
$gap: 20px !default;

.list {
  gap: $gap;
}

.list {
  gap: 10px;
}

The second line did nothing, because $gap already had a value. You will see how this is used with modules in a later chapter.

Naming Tips

• Use lowercase words joined with hyphens: $text-muted, $border-radius
• Name variables by their job, not their look: $primary ages better than $pink
• Keep all global variables together in one file, often called _variables.scss

Exercise