Sass Variables

Sass Tutorial

Sass Variables – Complete Practical Guide

Sass variables allow you to store reusable values like colors, fonts, sizes, and spacing in one place and use them throughout your stylesheet.

 Think of Sass variables as constants for your CSS.

1. What Are Sass Variables?

Sass variables store values using the $ symbol.

Instead of repeating the same value everywhere, you define it once and reuse it.

Problem in CSS


 

If the color changes → you must update it everywhere

2.  Syntax

$variable-name: value;

Example


 

Change the variable → updates everywhere

3. Common Types of Sass Variables

3.1 Colors

3.2 Fonts

3.3 Spacing

3.4 Numbers

4. Variables in Real Use


 

Clean, readable, maintainable.

5. Variable Scope (Very Important)

5.1 Global Scope

Variables declared outside selectors are global.


 

Accessible everywhere.

5.2 Local Scope

Variables inside blocks are local.

 Not accessible outside .card.

6. Default Values (!default)

Used for libraries and themes.

If user defines $theme-color earlier → Sass keeps that value.
If not → default is used.

7. Overriding Variables


 

Later definitions override earlier ones.

8. Using Variables with Calculations

Sass supports math operations.


 

9. Variables in Media Queries


 

Makes breakpoints reusable and consistent.

10. Variables with Colors Functions


 

Easy theme control

11. Partial Files & Variables

Usually variables are stored in a separate file.

  • _variables.scss
$primary: #1a73e8;
$font-main: Arial, sans-serif;
  • style.scss

@use "variables";

body {
font-family: variables.$font-main;
}

Best practice for large projects.

12. Sass Variables vs CSS Variables

FeatureSass VariablesCSS Variables
EvaluatedCompile timeRuntime
ScopeFile-basedDOM-based
JS AccessNo Yes
Media query changesNo Yes
  • Sass variables = design-time
  • CSS variables = runtime

13. Common Mistakes

  1. Forgetting $ symbol

  2. Using It in plain .css files

  3. Expecting Sass variables to change at runtime

  4. Overusing variables unnecessarily

  5. Confusing Its variables with CSS custom properties

14. Interview-Level Questions

Q: What symbol is used for It?
$

Q: Are It available at runtime?
No, only at compile time.

Q: Can It be used in media queries?
Yes.

Q: Difference between Sass and CSS?
Compile-time vs runtime.

Best Practices

  • Use meaningful variable names

  • Group variables (colors, spacing, fonts)

  • Store variables in separate files

  • Use !default for themes

  • Avoid hardcoding repeated values

Final Summary

  • It store reusable values

  • Defined using $

  • Make CSS cleaner and maintainable

  • Evaluated at compile time

  • Essential for scalable Sass architecture

You may also like...