sass

use variables

sass uses the $ symbol to identify variables (older versions of sass used ! to identify variables.

variable declaration

$highlight-color: #F90;

When a variable is defined within a css rule block, the variable can only be used within this rule block. The same is true if they appear in any form of {...} block ( like @media or @font-face blocks ):

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #F90;
}

variable reference

Variables can be used wherever standard values ​​for CSS properties (such as 1px or bold) can exist.

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

//编译后

.selected {
  border: 1px solid #F90;
}

Variable values ​​can also refer to other variables.

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

Whether variable names are separated by dashes or underscores;

The variable name of sass can be the same as the attribute name and selector name in css