5、SASS

1、变量 $ 

SassScript 最普遍的用法就是变量,变量以美元符号开头,赋值方法与css属性的写法一样:

$ 200px;

直接使用即可调用变量

#main {
  width: $width;
}

变量支持块级作用域,在嵌套括号内定义的变量只能在嵌套内及下层使用(局部变量)

不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。

将局部变量转换为全局变量可以添加 !global 声明:

#main {
  $width: 200px !global;
  width:$width;
}

编译为:

#main {
  width: 200px;
}

#sidebar {
  width: 200px;
}

2、数据类型(Data Types)

SassScript 支持6种主要的数据类型:

  • 数字:1,2,12,10px
  • 字符串:有引号字符串 与 无引号字符串 "foo", 'bar', baz
  • 颜色:blue, #04a3f9, rgba(0,0,0,0.8)
  • 布尔型:true,false
  • 数组(list),用空格或逗号作分隔符, 1.5em 1em 0 2em, Helvetica,Arial,Sans-serif
  • maps:相当于JavaScript中的Object, (key:value1, key2:value2)
原文地址:https://www.cnblogs.com/wangweizhang/p/11727292.html