css、less、sass中定义变量，并使用变量设置属性值

CSS的变量声明和使用

:root{
      --base: yellow;
      --spacing: 10px;
      --blur: 10px;
}

上面代码定义了3个变量，：root使得所有人可访问

img{
      filter: blur(var(--blur));
      padding: var(--spacing);
      background: var(--base);
}

上面使用了之前定义的变量作为属性值

还可以通过js改变变量的值，从而改变属性

 document.documentElement.style.setProperty(`--${this.name}`,this.value + suffix)

其中： 

${this.name}是解析变量的写法

LESS的变量声明和使用

less文件内容

@charset "utf-8";   
//定义变量
 @test-width:200px;
 @test-height:300px;
 //定义样式
 .testDiv{
    width:@test-width;
    height:@test-height;
    background-color: aquamarine;
}

SASS

sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。

1、普通变量：定义之后可以在全局范围内使用。

scss语法：

$fontSize: 12px;
body{
  font-size:$fontSize;
}

css输出：

body{
    font-size:12px;
}

2、默认变量：Sass的默认变量仅需要在值后面加上!default即可。

scss编译

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
	line-height: $baseLineHeight; 
}

css输出：

body{
    line-height:2;
}

可以看出现在编译后的line-height为2，而不是我们默认的1.5。默认变量的价值在进行组件化开发的时候会非常有用。

3、特殊变量：一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用

scss编译

$borderDirection: top !default; 
$baseFontSize: 12px !default;
$baseLineHeight: 1.5 !default;

//应用于class和属性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

CSS输出：

.border-top{
  border-top:1px solid #ccc;
}
body {
  font: 12px/1.5;
}

4、多值变量：多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。

list

1. list数据可通过空格，逗号或小括号分隔多个值，可用nth(var,var,value,[$separator]) 具体可参考sass Functions（搜索List Functions即可）

scss输出

$linkColor:#08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
a{
  color:nth($linkColor,1);
  &:hover{
    color:nth($linkColor,2);
  }
}

css输出

a {
  color: #08c;
}
a:hover {
  color: #333;
}

map

1. map数据以key和value成对出现，其中value又可以是list
2. 格式为：$map: (key1: value1, key2: value2, key3: value3)
3. 通过map-get(map,map,map)等
4. 具体可参考sass Functions（搜索Map Functions即可）

定义：

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

scss编译

$key-green:green;
$val-green:#fff;
$key-red:red;
$val-red: #ff0000;
$key-info:info;
$val-info: #ff00ff;
$key-success:success;
$val-success: #f66;

//$text: (green: #fff, red: #ff0, info: #f0f);
$text: (
    $key-green: $val-green,
    $key-red: $val-red,
    $key-info: $val-info,
    $key-success:$val-success
);

@each $i, $size in $text {
    .text-#{$i} {
        color: $size;
    }
}

css输出

.text-green {
  color: #fff;
}

.text-red {
  color: #ff0000;
}

.text-info {
  color: #ff00ff;
}

.text-success {
  color: #f66;
}

5、全局变量：在变量值后面加上!global即为全局变量。这个目前还用不上，不过将会在sass 3.4后的版本中正式应用。目前的sass变量范围饱受诟病，所以才有了这个全局变量。

目前变量机制

在选择器中声明的变量会覆盖外面全局声明的变量。(这也就人们常说的sass没有局部变量)

scss编译

$fontSize:12px;
body{
    $fontSize: 14px;
    font-size:$fontSize;
}
p{
    font-size:$fontSize;
}

css输出

body {
  font-size: 14px;
}
p {
  font-size: 12px;
}

这里设置了两个变量，然后在body里面重新设置了下，有点不同的是对于$color变量，我们设置了!global。通过编译后的css可以看到font-size取值不同，而color取值相同。与上面的机制对比就会发现默认在选择器里面的变量为局部变量，而只有设置了!global之后才会成为全局变量。

文末彩蛋：
关于less和sass的区别：
sass版

$color:red;
p{
    $color:blue;
    color:$color;//blue
}
a{
    color:$color;//blue
}

less版

@color:red;
p{
    @color:blue;
    color:@color;//blue
}
a{
    color:@color;//red
}

详细介绍请移步这里。

介绍一个在线编辑sass的工具： sassmeister