变量

58 0

sass支持变量,开头使用$符号表示,并且可以存储多种数据类型。

  • 字符串
  • 数字
  • 颜色值
  • 布尔值
  • 列表
  • null 值

例子

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}

变量也是有作用域的。

$myColor: red;

h1 {
  $myColor: green;   // 只在 h1 里头有用,局部作用域
  color: $myColor;
}

p {
  color: $myColor;
}

我们在h1选择器里面声明的变量,只有他本身或者他里面的子选择器才有效,而{}就是一个作用域,可以理解为js中function的作用域。

全局声明 !global

哪怕我们的变量是写在作用域中的,我们依然可以使用强制声明,将其转换为全局的声明,这就和css中的!important效果相同

$myColor: red;

h1 {
  $myColor: green !global;  // 全局作用域
  color: $myColor;
}

p {
  color: $myColor;
}

此时下面的p元素选择器的颜色color变成了green

0
  • 本文分类:SASS
  • 本文标签:sass变量
  • 流行热度:已超过 58 人围观了本文
  • 发布日期:2020年04月20日 - 3时17分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。
微信收款码
微信收款码