Variable declaration with $ in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the $ symbol represent in Sass?

In Sass, the $ symbol is used to declare a variable. It helps store values like colors, sizes, or fonts that you can reuse throughout your stylesheet.

beginner

How do you declare a variable named $main-color with the value #3498db in Sass?

You write:

$main-color: #3498db;

This sets $main-color to a blue color you can use later.

beginner

Why use variables in Sass instead of repeating values?

Variables make your code easier to update and maintain. Change the value once, and it updates everywhere the variable is used, saving time and reducing mistakes.

intermediate

Can you change the value of a Sass variable after it is declared?

Yes, Sass variables can be reassigned later in the same scope, and the new value will be used in subsequent rules.

beginner

How do you use a Sass variable inside a CSS rule?

Use the variable by writing its name with $. For example:

color: $main-color;

This applies the stored color value.

What symbol starts a variable name in Sass?

A %

B #

C @

D $

In Sass, variables always start with the $ symbol.

Which of these is a correct Sass variable declaration?

A $font-size: 16px;

B font-size = 16px;

C @font-size: 16px;

D font-size: $16px;

Sass variables are declared with $name: value; syntax.

If you want to change a color used many times, what is the best Sass practice?

A Change each color manually

B Use a variable and change its value once

C Use inline styles

D Use !important everywhere

Using variables lets you update the color in one place, which updates all uses.

Can you reassign a Sass variable after it is set?

A Yes, anytime

B Only if you use !default

C Only inside media queries

D No, variables are immutable

Sass variables can be reassigned after they are declared.

How do you apply a Sass variable $main-color to a CSS property?

A color: main-color;

B color: #main-color;

C color: $main-color;

D color: var(main-color);

Use the variable name with $ directly in the property value.

Explain how to declare and use a variable in Sass with an example.

Think about how you store a color once and use it multiple times.

Why are variables helpful in Sass? Describe a real-life situation where they save time.

Imagine changing a color on a website with many pages.