Sass Variables

Sass variables let you store a value once, behind a name starting with a dollar sign, and reuse it anywhere in your stylesheets.

Declaring Sass Variables

A Sass variable begins with a dollar sign, followed by a name, a colon, a value, and a semicolon. Variables are resolved entirely at compile time - by the time the CSS reaches the browser, every $variable has already been replaced with its actual value.

Why Use Variables?

Variables give a stylesheet a single source of truth. Instead of hunting through every file to update a color or spacing value, you change it once at the top of your source and recompile. They also make intent clearer: $primary-color communicates far more than #3454d1 repeated fifty times.

  • Brand and theme colors
  • Font stacks and base font sizes
  • Spacing units used for margin and padding
  • Responsive breakpoints
  • A shared z-index scale for layered UI

Declaring and Using Variables

<!DOCTYPE html>
<html>
<head>
<style id="compiled-css"></style>
</head>
<body>
<p>Sample paragraph text styled by the compiled body rule.</p>

<script src="https://cdn.jsdelivr.net/npm/sass.js@0.11.1/dist/sass.sync.js"></script>
<script>
  Sass.setWorkerUrl('https://cdn.jsdelivr.net/npm/sass.js@0.11.1/dist/sass.worker.js');
  var sass = new Sass();
  var scss = "$primary-color: #3454d1;\n$font-stack: 'Helvetica Neue', Arial, sans-serif;\n$base-spacing: 8px;\n\nbody {\n  font-family: $font-stack;\n  color: $primary-color;\n  margin: $base-spacing * 2;\n}";
  sass.compile(scss, function (result) {
    if (result && typeof result.text === "string") {
      document.getElementById("compiled-css").textContent = result.text;
    } else {
      var msg = (result && (result.formatted || result.message)) || "Unknown Sass compile error";
      var pre = document.createElement("pre");
      pre.style.color = "#b00020";
      pre.style.whiteSpace = "pre-wrap";
      pre.style.fontFamily = "monospace";
      pre.style.padding = "16px";
      pre.textContent = "Sass compile error:\n" + msg;
      document.body.prepend(pre);
    }
  });
</script>
</body>
</html>

Variable Scope

A variable declared at the top level of a file is global and can be used anywhere below it. A variable declared inside a selector block or another block is local to that block by default. The special !default flag assigns a value only if the variable is not already set, which is how configurable Sass libraries let consumers override defaults before importing them.

Local Scope and !default

<!DOCTYPE html>
<html>
<head>
<style id="compiled-css"></style>
</head>
<body>
<div class="alert">This is an alert box.</div>

<script src="https://cdn.jsdelivr.net/npm/sass.js@0.11.1/dist/sass.sync.js"></script>
<script>
  Sass.setWorkerUrl('https://cdn.jsdelivr.net/npm/sass.js@0.11.1/dist/sass.worker.js');
  var sass = new Sass();
  var scss = "$button-padding: 12px !default;\n\n.alert {\n  $alert-border: 2px solid red; // local to .alert only\n  border: $alert-border;\n  padding: $button-padding;\n}\n\n// $alert-border is not accessible out here";
  sass.compile(scss, function (result) {
    if (result && typeof result.text === "string") {
      document.getElementById("compiled-css").textContent = result.text;
    } else {
      var msg = (result && (result.formatted || result.message)) || "Unknown Sass compile error";
      var pre = document.createElement("pre");
      pre.style.color = "#b00020";
      pre.style.whiteSpace = "pre-wrap";
      pre.style.fontFamily = "monospace";
      pre.style.padding = "16px";
      pre.textContent = "Sass compile error:\n" + msg;
      document.body.prepend(pre);
    }
  });
</script>
</body>
</html>
Note: Stick to lowercase, hyphen-separated names such as $primary-color rather than $primaryColor. It matches the convention used throughout the rest of the Sass and CSS ecosystem.

Reusing Values with Math

<!DOCTYPE html>
<html>
<head>
<style id="compiled-css"></style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<small>Small text</small>

<script src="https://cdn.jsdelivr.net/npm/sass.js@0.11.1/dist/sass.sync.js"></script>
<script>
  Sass.setWorkerUrl('https://cdn.jsdelivr.net/npm/sass.js@0.11.1/dist/sass.worker.js');
  var sass = new Sass();
  var scss = "$base-size: 16px;\n\nh1 { font-size: $base-size * 2; }\nh2 { font-size: $base-size * 1.5; }\nsmall { font-size: $base-size * 0.8; }";
  sass.compile(scss, function (result) {
    if (result && typeof result.text === "string") {
      document.getElementById("compiled-css").textContent = result.text;
    } else {
      var msg = (result && (result.formatted || result.message)) || "Unknown Sass compile error";
      var pre = document.createElement("pre");
      pre.style.color = "#b00020";
      pre.style.whiteSpace = "pre-wrap";
      pre.style.fontFamily = "monospace";
      pre.style.padding = "16px";
      pre.textContent = "Sass compile error:\n" + msg;
      document.body.prepend(pre);
    }
  });
</script>
</body>
</html>
AspectSass Variable ($x)CSS Custom Property (--x)
ResolvedAt compile timeAt runtime, in the browser
Can change with JavaScriptNoYes
Works inside media queries as a value sourceYes, but staticallyYes, and can respond to context
Requires a build stepYesNo
Note: Because Sass variables are resolved when the file compiles, they cannot be changed at runtime the way CSS custom properties can. If you need a value that changes based on user interaction or JavaScript, a CSS custom property is usually the better tool.
Note: The !default flag is especially useful when writing a shared Sass library: consumers can set $button-padding before importing your file, and your !default declaration will simply be skipped in favor of their value.

Exercise: Sass Variables

How do you declare a variable in Sass?

Keep Going

Sass Interview QuestionsPractice real questions asked for SassFrontend Developer SalarySee what Frontend Developer roles pay in the marketAuto Apply for JobsApply to open roles related to Sass and tweak your resume