Hướng dẫn global trong scss

Sass variables are simple: you assign a value to a name that begins with

.alert {
  border: 1px solid rgba(198, 83, 140, 0.88);
}

8, and then you can refer to that name instead of the value itself. But despite their simplicity, they're one of the most useful tools Sass brings to the table. Variables make it possible to reduce repetition, do complex math, configure libraries, and much more.

A variable declaration looks a lot like a property declaration: it’s written

.alert {
  border: 1px solid rgba(198, 83, 140, 0.88);
}

9. Unlike a property, which can only be declared in a style rule or at-rule, variables can be declared anywhere you want. To use a variable, just include it in a value.

SCSS Syntax

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

Sass Syntax

$base-color: #c6538c
$border-dark: rgba($base-color, 0.88)

.alert
  border: 1px solid $border-dark

CSS Output

.alert {
  border: 1px solid rgba(198, 83, 140, 0.88);
}

⚠️ Heads up!

CSS has variables of its own, which are totally different than Sass variables. Know the differences!

• Sass variables are all compiled away by Sass. CSS variables are included in the CSS output.

• CSS variables can have different values for different elements, but Sass variables only have one value at a time.

• Sass variables are imperative, which means if you use a variable and then change its value, the earlier use will stay the same. CSS variables are declarative, which means if you change the value, it’ll affect both earlier uses and later uses.

SCSS Syntax

$variable: value 1;
.rule-1 {
  value: $variable;
}

$variable: value 2;
.rule-2 {
  value: $variable;
}

Sass Syntax

$variable: value 1
.rule-1
  value: $variable


$variable: value 2
.rule-2
  value: $variable

CSS Output

.rule-1 {
  value: value 1;
}

.rule-2 {
  value: value 2;
}

💡 Fun fact:

Sass variables, like all Sass identifiers, treat hyphens and underscores as identical. This means that

$variable: value 1;
.rule-1 {
  value: $variable;
}

$variable: value 2;
.rule-2 {
  value: $variable;
}

0 and

$variable: value 1;
.rule-1 {
  value: $variable;
}

$variable: value 2;
.rule-2 {
  value: $variable;
}

1 both refer to the same variable. This is a historical holdover from the very early days of Sass, when it only allowed underscores in identifier names. Once Sass added support for hyphens to match CSS’s syntax, the two were made equivalent to make migration easier.

Normally when you assign a value to a variable, if that variable already had a value, its old value is overwritten. But if you’re writing a Sass library, you might want to allow your users to configure your library’s variables before you use them to generate CSS.

To make this possible, Sass provides the

$variable: value 1;
.rule-1 {
  value: $variable;
}

$variable: value 2;
.rule-2 {
  value: $variable;
}

2 flag. This assigns a value to a variable only if that variable isn’t defined or its value is

$variable: value 1;
.rule-1 {
  value: $variable;
}

$variable: value 2;
.rule-2 {
  value: $variable;
}

3. Otherwise, the existing value will be used.

Only Dart Sass currently supports

$variable: value 1;
.rule-1 {
  value: $variable;
}

$variable: value 2;
.rule-2 {
  value: $variable;
}

4. Users of other implementations must use the

$variable: value 1;
.rule-1 {
  value: $variable;
}

$variable: value 2;
.rule-2 {
  value: $variable;
}

5 rule instead.

Variables defined with

$variable: value 1;
.rule-1 {
  value: $variable;
}

$variable: value 2;
.rule-2 {
  value: $variable;
}

2 can be configured when loading a module with the

$variable: value 1;
.rule-1 {
  value: $variable;
}

$variable: value 2;
.rule-2 {
  value: $variable;
}

4 rule. Sass libraries often use

$variable: value 1;
.rule-1 {
  value: $variable;
}

$variable: value 2;
.rule-2 {
  value: $variable;
}

2 variables to allow their users to configure the library’s CSS.

To load a module with configuration, write

$variable: value 1;
.rule-1 {
  value: $variable;
}

$variable: value 2;
.rule-2 {
  value: $variable;
}

9. The configured values will override the variables’ default values. Only variables written at the top level of the stylesheet with a

$variable: value 1;
.rule-1 {
  value: $variable;
}

$variable: value 2;
.rule-2 {
  value: $variable;
}

2 flag can be configured.

SCSS Syntax

// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

// style.scss
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem
);

Sass Syntax

// _library.sass
$black: #000 !default
$border-radius: 0.25rem !default
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default

code
  border-radius: $border-radius
  box-shadow: $box-shadow

// style.sass
@use 'library' with ($black: #222, $border-radius: 0.1rem)

CSS Output

$base-color: #c6538c
$border-dark: rgba($base-color, 0.88)

.alert
  border: 1px solid $border-dark

0

Variables that are defined by a built-in module cannot be modified.

SCSS Syntax

$base-color: #c6538c
$border-dark: rgba($base-color, 0.88)

.alert
  border: 1px solid $border-dark

1

Sass Syntax

$base-color: #c6538c
$border-dark: rgba($base-color, 0.88)

.alert
  border: 1px solid $border-dark

2

Variables declared at the top level of a stylesheet are global. This means that they can be accessed anywhere in their module after they’ve been declared. But that’s not true for all variables. Those declared in blocks (curly braces in SCSS or indented code in Sass) are usually local, and can only be accessed within the block they were declared.

SCSS Syntax

$base-color: #c6538c
$border-dark: rgba($base-color, 0.88)

.alert
  border: 1px solid $border-dark

3

Sass Syntax

$base-color: #c6538c
$border-dark: rgba($base-color, 0.88)

.alert
  border: 1px solid $border-dark

4

CSS Output

$base-color: #c6538c
$border-dark: rgba($base-color, 0.88)

.alert
  border: 1px solid $border-dark

5

Local variables can even be declared with the same name as a global variable. If this happens, there are actually two different variables with the same name: one local and one global. This helps ensure that an author writing a local variable doesn’t accidentally change the value of a global variable they aren’t even aware of.

SCSS Syntax

$base-color: #c6538c
$border-dark: rgba($base-color, 0.88)

.alert
  border: 1px solid $border-dark

6

Sass Syntax

$base-color: #c6538c
$border-dark: rgba($base-color, 0.88)

.alert
  border: 1px solid $border-dark

7

CSS Output

$base-color: #c6538c
$border-dark: rgba($base-color, 0.88)

.alert
  border: 1px solid $border-dark

8

If you need to set a global variable’s value from within a local scope (such as in a mixin), you can use the

$variable: value 1
.rule-1
  value: $variable


$variable: value 2
.rule-2
  value: $variable

1 flag. A variable declaration flagged as

$variable: value 1
.rule-1
  value: $variable


$variable: value 2
.rule-2
  value: $variable

1 will always assign to the global scope.

SCSS Syntax

$base-color: #c6538c
$border-dark: rgba($base-color, 0.88)

.alert
  border: 1px solid $border-dark

9

Sass Syntax

.alert {
  border: 1px solid rgba(198, 83, 140, 0.88);
}

0

CSS Output

.alert {
  border: 1px solid rgba(198, 83, 140, 0.88);
}

1

⚠️ Heads up!

Older Sass versions allowed

$variable: value 1
.rule-1
  value: $variable


$variable: value 2
.rule-2
  value: $variable

1 to be used for a variable that doesn’t exist yet. This behavior was deprecated to make sure each stylesheet declares the same variables no matter how it’s executed.

The

$variable: value 1
.rule-1
  value: $variable


$variable: value 2
.rule-2
  value: $variable

1 flag may only be used to set a variable that has already been declared at the top level of a file. It may not be used to declare a new variable.

Variables declared in flow control rules have special scoping rules: they don’t shadow variables at the same level as the flow control rule. Instead, they just assign to those variables. This makes it much easier to conditionally assign a value to a variable, or build up a value as part of a loop.

SCSS Syntax

.alert {
  border: 1px solid rgba(198, 83, 140, 0.88);
}

2

Sass Syntax

.alert {
  border: 1px solid rgba(198, 83, 140, 0.88);
}

3

CSS Output

.alert {
  border: 1px solid rgba(198, 83, 140, 0.88);
}

4

⚠️ Heads up!

Variables in flow control scope can assign to existing variables in the outer scope, but they can’t declare new variables there. Make sure the variable is already declared before you assign to it, even if you need to declare it as 

$variable: value 1;
.rule-1 {
  value: $variable;
}

$variable: value 2;
.rule-2 {
  value: $variable;
}

3.

The Sass core library provides a couple advanced functions for working with variables. The

$variable: value 1
.rule-1
  value: $variable


$variable: value 2
.rule-2
  value: $variable

6 function returns whether a variable with the given name exists in the current scope, and the

$variable: value 1
.rule-1
  value: $variable


$variable: value 2
.rule-2
  value: $variable

7 function does the same but only for the global scope.

⚠️ Heads up!

Users occasionally want to use interpolation to define a variable name based on another variable. Sass doesn’t allow this, because it makes it much harder to tell at a glance which variables are defined where. What you can do, though, is define a map from names to values that you can then access using variables.