Sass变量

刘春龙原创2026/3/5大约 1 分钟

sass让人们受益的一个重要特性就是它为 css 引入了变量。你可以把反复使用的 css 属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途

sass使用$符号来标识变量

比如$highlight-color和$sidebar-width。为什么选择$ 符号呢？因为它好认、更具美感，且在 CSS 中并无他用，不会导致与现存或未来的 css 语法冲突

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

默认变量值

一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值

$link-color: blue;
$link-color: red;
a {
  color: $link-color; // red
}

!default 说明

!default 作用，是将这次变量值的优先级降到最低

$link-color: blue;
$link-color: red !default;
a {
  color: $link-color; // blue
}

<div class="left">1</div>
<div class="center">2</div>
<div class="right">3</div>

$color: red;
.left {
  color: $color;
}
.center {
  color: $color;
}
.right {
  color: $color;
}

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。