scss常用语法整理

定义变量使用

$theme-color: #f10215;
$main-color: green;

使用：

main{
   
	color:$theme;
}

mixin使用:

将样式混入到其他地方使用

scss文件中定义变量：例如

@mixin border（$deg,$1,$2,$3,$4）{
   
	// 定义的样式
	// 听过角度deg去控制哪个方向是渐进色
	border-image:-webkit-linear-gradient($deg, #FF8002, #B5C915, #5ABB91) $1,$2,$3,$4;
}

使用如下：
1.引入定义变量的文件

body{
   
	@include border(0,0,0,0,5)
}

继承

继承是SASS中非常重要的一个特性，可以通过@extend指令在选择器之间复用CSS属性，并且不会产生冗余的代码，下面例子将会通过SASS提供的继承机制建立一系列样式：

// 下面这段代码不会被输出到最终生成的CSS文件，因为它没有被任何代码所继承。
%other-styles {
   
  display: flex;
  flex-wrap: wrap;
}

// 下面代码会正常输出到生成的CSS文件，因为它被其他使用的地方所继承。
%message {
   
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
   
  @extend %message;
}

.success {