SASS Variables

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that makes the CSS development process efficient and easy. SASS offers some additional features to CSS such as functions, mixins, and more. One of these powerful features is variables.

In this article, we will show you how to define and use SASS variables along with examples. Let’s get started.

What are SASS Variables?

In SASS, variables are symbolic names assigned to store data that can be reused throughout the style sheet. SASS variables enable you to define a value once and then reference it by its variable name wherever needed. They can be used to store strings, numbers, colors, booleans, lists, and nulls.

This concept may seem like traditional CSS variables, but SASS takes it a step further by offering more advanced capabilities. Let’s see how to define a SASS variable.

How To Define Variables In SASS

In SASS, variables are defined using the $ symbol followed by the variable name and value. The general syntax is as follows:

$variable-name: value;

Here’s an example of defining some SASS variables:

$primary-color: #007bff;
$font-family: "Arial", sans-serif;
$breakpoint-md: 768px;

In the example above, we defined variables for a primary color, a font style, and a breakpoint for screen size

Using SASS Variables

Once you’ve defined a variable, you can use it throughout your SASS file by referencing its name. For instance:

body {
  font-family: $font-family;
  color: $primary-color;
}

.container {
  max-width: $breakpoint-md;
}

In this example, we have used variables that we defined to style certain elements. When the above SASS code is compiled into CSS code, the variables will be replaced with their respective values. Here is what the CSS would look like:

body {
  font-family: "Arial", sans-serif;
  color: #007bff;
}

.container {
  max-width: 768px;
}

The beauty of using variables is that if you want to change the primary color or the font family for your entire project, you only need to modify the variable’s value, and all the elements using that variable will update accordingly.

Variable Scope

In SASS, variables have scope. This means that a variable’s visibility and accessibility depend on where it is defined. There are two types of variable scope in SASS:

Global Scope: Variables declared outside any selector or block have global scope. They can be accessed from anywhere within the SASS file.
Local Scope: Variables declared within a selector or block have local scope. They can only be accessed within that selector or block.

Here’s an example to illustrate variable scope:

$global-variable: 10px;

.container {
  $local-variable: 20px;
  width: $global-variable; // This works
  height: $local-variable; // This works

  .nested-element {
    width: $global-variable; // This works
    height: $local-variable; // This works
  }
}

.new-container {
  width: $global-variable; // This works
  height: $local-variable; // This does NOT work - $local-variable is not accessible here
}

In short, we can say that variables defined outside of selectors are global and can be accessed from anywhere, whereas variables defined inside a selector have local scope and can only be used within the block in which they are defined.

Did You Know That? SASS vs SCSS
While SASS uses a more concise and indentation-based syntax, SCSS maintains a syntax similar to CSS with curly braces and semicolons. This makes SCSS more approachable for developers.

Default Values for Variables

In Sass, the !default flag is a useful feature that allows you to assign a value to a variable only if the variable isn’t already defined or if its value is null. This feature is particularly helpful when creating Sass libraries or themes, as it allows users to configure variables before the styles are generated, without overwriting their customizations if they have already set values for those variables.

$primary-color: #007bff !default;

This behavior allows users to customize the variables according to their needs while still providing sensible defaults if no customization is done.

Here’s a simple example to illustrate this concept:

// Library variables with defaults
$primary-color: blue !default;
$secondary-color: green !default;

// User-defined values
$primary-color: red;

body {
  background-color: $primary-color;
  color: $secondary-color;
}

In this example:

If the user didn’t define $secondary-color, the default green will be used
If the user defined $primary-color, their value (red) will be used
Otherwise, the defaults will be used ($primary-color: blue, $secondary-color: green)

In this example, the !default flag allows the user to customize the library’s variables while still falling back to default values if they haven’t provided their own values.

SASS Built-in Variables

In SASS, there are also built-in variables predefined by Sass and can be used to store common values. These variables can not be modified.

For example, you can call the math module from SASS and use it to get PI number:

@use "sass:math" as math;

.container {
  content: math.$pi;
}

When it is converted to CSS, it would look like this

.container {
  content: 3.1415926536;
}/

Data Types In SASS

Data types in SASS are used to define and manipulate various types of values, such as numbers, strings, lists, maps, and more. These data types can often be assigned to variables for use in your stylesheets.

These data types include:

Numbers
Strings
Lists
Maps
Booleans
Null

$width: 200px; // Numbers
$font-stack: 'Arial, sans-serif'; // Strings
$colors: red, green, blue; // Lists
$breakpoints: (
  small: 480px,
  medium: 768px,
  large: 1024px
); // maps
$is-dark-theme: true; // Booleans
$default-color: null; // null

If you want to learn more about SASS data types, please check the article: Sass Data Types

Did You Know That? SCSS & Symbol
In SCSS (Sassy CSS), the ampersand (&) symbol is used to reference the parent selector within nested selectors. This feature is quite useful for generating complex selectors and maintaining DRY (Don’t Repeat Yourself) code when you need to combine selectors or apply styles to specific elements within a selector hierarchy.

SASS Variables vs CSS Variables

CSS also support variable to store some values. CSS variables are a part of standard CSS and are denoted by the -- prefix followed by the variable name. They are declared using the :root pseudo-class or any other CSS selector, and their values are applied using the var() function.

The important difference between SASS variables and CSS variables CSS variables are dynamic and can be updated using JavaScript.

Example of a CSS variable:

:root {
  --primary-color: #007bff;
  --font-size: 16px;
}

body {
  color: var(--primary-color);
  font-size: var(--font-size);
}

Conclusion

SASS variables are a powerful feature. By using variables, you can define values once and reference them throughout your SASS file thus, you reduce code repetition and make your code more readable and easier to maintain.

They’re particularly useful for storing color values, font sizes, margins, and other repetitive values that might change across your design. In this article, we have covered how to define and use SASS variables.

If you want to learn more about SASS, you can check the articles below

Thank you for reading.