木灵鱼儿

木灵鱼儿

阅读:831

最后更新:2020/04/20/ 3:22:36

变量

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
文章被阅读 831

相关文章