Tutorialsteacher

Follow Us

Articles
  • C#
  • C# OOP
  • ASP.NET Core
  • ASP.NET MVC
  • LINQ
  • Inversion of Control (IoC)
  • Web API
  • JavaScript
  • TypeScript
  • jQuery
  • Angular 11
  • Node.js
  • D3.js
  • Sass
  • Python
  • Go lang
  • HTTPS (SSL)
  • Regex
  • SQL
  • SQL Server
  • PostgreSQL
  • MongoDB
  • Sass - Get Started
  • What is Sass
  • Sass - Setup Environment
  • Sass - Syntax
  • Sass - Variable
  • Sass - Script
  • Sass - Data Types
  • Sass - Operators
  • Sass - Functions
  • String Functions
  • Numeric Functions
  • List Functions
  • Map Functions
  • Selector Functions
  • Introspection Functions
  • Color Functions
  • Control Directives
  • Import Files and Partials
  • Sass - Mixins
  • Sass - Inheritance
Entity Framework Extensions - Boost EF Core 9
  Bulk Insert
  Bulk Delete
  Bulk Update
  Bulk Merge

Sass Variable

If you never use any of the other capabilities of Sass, variables would be enough to justify the extra step of transpiling your CSS. We've already looked at why variables are so useful. Now let's take a closer look at how to declare them.

The basic syntax for defining a variable is simple: Just use a $ before the variable name and treat its definition like a CSS rule:

Sass Variable Syntax:
$<variable name>:<value>;

The following declares a variable named large-font.

$large-font: 50px;

Once it's been declared, you can use the variable just as though you were typing the variable:

SCSS:
$large-font: 50px;

p {
    font-size: $large-font;
}

The Sass transpiler will handle the substitution for you:

CSS:
p {
    font-size: 50px;
}

There's only one "gotcha" in declaring variables: For historical reasons, a hyphen and an underscore are interchangeable. Look at the following example.

SCSS:
$main-color: red;

p {
   color: $main-color; /* variable with hyphen */
}

a {
   color: $main_color;/* variable with underscore */
}

In the above example, both of the elements will display text in red.

Scope

Like any modern programming language, Sass variables support the concept of scope: Variables are only available at the level of nesting where they're defined. Let's look at an example:

SCSS: Variable Scope
$main-color: red;

p {
   $main-color: blue;
   color: $main-color;
}

a {
  color: $main-color;
}

Can you figure out what color the text inside an <a> tag will be? It will be red. The second definition, $main-color: blue; is inside the rule for the <p> tag, and will only be available there. The following is transpiled CSS.

CSS:
p {
   color: blue;
}

a {
   color: red;
}

That's the default behavior. You can override it by using the !global switch:

SCSS: !global Switch
$main-color: red;

p {
   $main-color: blue !global;
   color: $main-color;
}

a {
  color: $main-color;
}

which will result in

CSS:
p {
   color: blue;
}

a {
   color: blue;
}

In this code, the text inside the <a> tag will be blue. But the !global switch, like it's siblings !important and !default, have side-effects that can be hard to predict or track down, so use them with care. As a general rule, if you want a variable to be global, define it outside any rules. Best practice is to define all your global variables in a single file, named _globals.scss by convention, and include it using @include anywhere it's needed.

Learn more about SassScript expressions in the next chapter.

TUTORIALSTEACHER.COM

TutorialsTeacher.com is your authoritative source for comprehensive technologies tutorials, tailored to guide you through mastering various web and other technologies through a step-by-step approach.

Our content helps you to learn technologies easily and quickly for learners of all levels. By accessing this platform, you acknowledge that you have reviewed and consented to abide by our Terms of Use and Privacy Policy, designed to safeguard your experience and privacy rights.

[email protected]

ABOUT USTERMS OF USEPRIVACY POLICY
copywrite-symbol

2024 TutorialsTeacher.com. (v 1.2) All Rights Reserved.