Register to get access to free programming courses with interactive exercises

Variables SASS: Fundamentals of Operations

One of the simplest, yet most powerful tools in SASS is variables. They're simple in nature, but make life a lot easier when you're maintaining a project.

Variables mean you don't have to repeat lots of code. Let's see how it works by creating a color scheme for a project as an example. Let's take a few basic colors that we want to use:

  • Dark — #303846
  • Light — #f7f7f7
  • Basic — #09d3ac
  • Secondary — #2196f3

Now we can declare variables at the beginning of our SASS file and write these values to them. This is done using the $ symbol and specifying a unique name.

$dark: #303846;
$light: #f7f7f7;
$primary: #09d3ac;
$secondary: #2196f3;

Now we can use these colors in any part of our project simply by referring to them by name.

.card {
  background: $light;
  border: 1px solid $dark;
}

The result of the compilation is the following CSS code:

.card {
  background: #f7f7f7;
  border: 1px solid #303846;
}

Note that, just like the template selectors, the variables don't go into our CSS file after compilation. They're only used inside the SASS file, which helps avoid having unnecessary information inside the CSS.

Many might argue that variables already exist in CSS, and how they're used is similar to what was shown above. You would be right - in CSS it's now possible to control colors in exactly the same way. But this introduces extra values, and the use of variables is a bit more complicated than it is in preprocessors. It's also important to understand the difference between variables in SASS and in CSS. Variables in CSS exist in real time, meaning that they're in the CSS file, can be changed directly in CSS, and browsers constantly access them when needed. Variables in SASS disappear after compilation, and they're replaced with values in CSS.

Area of visibility

A variable can be declared inside or outside a selector. Depending on where the variable was declared, it can be used either in the whole project or only within a certain selector. Look at an example of this code:

$margin-top: 20px;

.card {
  $bg-color: #f9f9f9;
}

.wrapper {
  margin-top: $margin-top;
  background: $bg-color;
}

In this case we declared two variables: $margin-top and $bg-color. Both variables were subsequently used in the .wrapper selector. What happens after compilation? In fact, there won't be any compilation. We'll get an error message:

Error: Undefined variable.
  ╷
9 │   background: $bg-color;
  │               ^^^^^^^^^
  ╵

The compiler tells us that an unknown variable was used on line 9. But it's there - we declared it on line 4! Yes - the $bg-color variable does exist in the code, but it only exists inside the .card selector and is simply invisible outside of that selector.

This behavior is called variable scope. Depending on where we declare a variable, we can access it either in the whole project or only within one selector. The $margin-top variable in this example is a global variable because it can be accessed in any part of our SASS file. The $bg-color variable in the example is a local variable and is only available within the selector where it was defined.

Let's look at another example:

.card {
  $main-bg: #f9f9f9;
  $header-bg: #2196f3;

  .card-header {
    background: $header-bg;
  }

  .card-body {
    background: $main-bg;
  }
}

Note that the variables $main-bg and $header-bg are declared inside the .card selector. Since the .card-header and .card-body selectors are inside the .card selector, the variables $main-bg and $header-bg will be available for these selectors. After compiling, we get the following CSS code:

.card .card-header {
  background: #2196f3;
}

.card .card-body {
  background: #f9f9f9;
}

Variable naming

As mentioned above, variable names must be unique. This rule is designed to prevent possible errors. In fact, a global variable and a local variable can have the same name. Let's try adding a global variable to our last example:

$main-bg: #f7f7f7;

.card {
  $main-bg: #f9f9f9;
  $header-bg: #2196f3;

  .card-header {
    background: $header-bg;
  }

  .card-body {
    background: $main-bg;
  }
}

.wrapper {
  background: $main-bg;
}

Note that the variable $main-bg is declared at the beginning of the SASS file and in the .card selector. You probably can't tell at a glance which $main-bg will be used in the project. Let's try to compile this code. There'll be no errors this time:

.card .card-header {
  background: #2196f3;
}

.card .card-body {
  background: #f9f9f9;
}

.wrapper {
  background: #f7f7f7;
}

The $main-bg variable created inside the .card selector actually has nothing to do with the global variable $main-bg. Even though they have the same name. But this can cause confusion, so you should never use the same name for global and local variables.

Connecting variables from another file

SASS styles are often split into several independent files for convenient organization, depending on their purpose. For example, we may have the following file structure:

└── scss/
    ├── config.scss
    ├── default_variables.scss
    └── app.scss

In this structure, we have the main file app.scss, where we want to connect the settings from the config.scss file and the default variable settings from the default_variables.scss file. You can include these files in the app.scss file with the @import directive by specifying the path to the desired file.

@import "config.scss";
@import "default_variables.scss";

You also don't need to specify an extension when you connect SASS files. The compiler will find the necessary file in the specified directory and plug it in. This means we can rewrite the code a bit and not specify an extra extension.

@import "config";
@import "default_variables";

The order in which the files are connected in this case is very important. If there are conflicting values inside config.scss and default_variables.scss files, the one given last will be taken. The same cascading rule works here as in CSS; styles written later have higher priority.

Default flag

Let's return to the structure of our project. Write the base colors for our project in default_variables.scss:

$primary: #A0D788;
$secondary: #71D0A7;
$third: #CCD47D;

Now that we've connected the file to our main styles file, we can use these variables. Use the colors in the app.scss.

@import "config";
@import "default_variables";

.card {
  background: $primary;

  .btn {
    background: $secondary;
  }
}

After compiling, we get the following CSS code:

.card {
  background: #A0D788;
}

.card .btn {
  background: #71D0A7;
}

As time passes, our file with variables grows, we may even use it as a package in lots of projects (for example, there's a similar file is in the Bootstrap framework), but then, suddenly we want to change the base color. This is absolutely normal, it happens in nearly all projects.

If we change the color directly in the default_variables.scss file, we get the result we want. But sometimes, this approach doesn't work. If we use such a file as a package in the form of a packet loaded from outside, then if we change the value in the local file, we won't be able to receive updates. Our file is no longer identical to the one in the shared server.

A special flag, !default, helps to solve this problem. This flag is set after the variable value and tells us that the default value should be used only if the variable value wasn't previously specified anywhere. Set the !default flag for our color scheme.

$primary: #A0D788!default;
$secondary: #71D0A7!default;
$third: #CCD47D!default;

Now, if we add the $primary variable to the config.scss file, its value will be used as the background color for the .card selector.

config.scss

$primary: #09D3AC;

default_variables.scss

$primary: #A0D788!default;
$secondary: #71D0A7!default;
$third: #CCD47D!default;

app.scss

@import "config";
@import "default_variables";

.card {
  background: $primary;

  .btn {
    background: $secondary;
  }
}

After compiling this code, we get the following result:

.card {
  background: #09D3AC;
}

.card .btn {
  background: #71D0A7;
}

Note that the resulting value of $primary came from the config.scss file, since the default flag in the variable file is !default.


Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs

From a novice to a developer. Get a job or your money back!

Layout Designer icon
Profession
New Under development beginner
Layout with the latest CSS standards
start anytime 5 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.