记录sass相关

变量

$开头命名变量

$blue:#ff0000;

定义map变量

map变量相当于对象

$colors:(
	primary:blue;
	success:red;
)

map-get

获取map变量某个key的值

.text-blue{
	color:map-get($colors,'primary')
}

map-merge

合并map变量

map-merge($colors,$another-colors)

!default

!default表示如果变量赋值过，那么！defaut的赋值就无效。

$white:#fff;
$white:#000 !default;
.color{
	color:$white;
}
//转成css
.color{
	color:#fff;
}

@mixin

定义一个可以在整个样式表中重复使用的样式,可以接受参数。

@mixin important-text($text-color) {
  color: $text-color;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

@include

将混入（mixin）引入到文档中。

$danger-color:red;
.danger {
  @include important-text($danger-color);
  background-color: green;
}

@extend

扩展某个类的样式

// focus状态下和原来的一样
.el-button:focus{
 	@extend .el-button
}

循环@each

@colors:(
	primary:blue,
	success:green
)

@each $key,$value in $colors{
	.text-#{$key}{
		color:$value
	}
}

结果是
.text-primary{color:blue}
.text-success{color:green}