跳至主要內容

Sass变量

刘春龙原创...大约 1 分钟WEB前端Sass教程文档

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;
}

轻松一刻 🎧

音乐
音乐

视频教程 🎥

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

上次编辑于:
贡献者: 刘春龙
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.7