css预处理器-Sass

scss

scss是sass的升级版

安装scss
npm i sass

使用
lang="scss"

全局变量在全局设置

$变量

属性变量

#{} div {
  border-#{$side}: 1px solid $color;
}

嵌套

<div class='a'>
	<div class='a-b></div>
<div>
-------
.a{
	&-b{                      //属性嵌套
		background{
            color：red         //属性嵌套
		}
	&:hover{
		color:red       // 伪类嵌套
	}
	}
}

继承

.class1{
    color:red
}
.class2{
@extend .class1;         // 相关于 继承clasa1的color
font-size:14px;
}

混合

 @mixin left($value:10px){   // 混合 left名 变量value  默认是10px
	color:red;
}
.class{
    @include left（4px）；
}

引用外部样式

@import './'    // 不建议使用

sass 运算

-- 加减乘除 --
$width:10px;
div{
	width:$width + 10px;
	height:$width * 10px
	height:(10px / 2)
}
-- 拼接 --
div{
    content：'hello'+'11';
}

命令

@mixin isHidden($bool:true){
    @if $bool{
		display:block;
	}
	@else{
        display:none;
	}
}

循环

@for $i from 1 to 10 {
    .margin-#{$i}{
		left:#{$i}px;
	}
}

---each---
@each $item in a,b,c,d{
	.#$(item){                // 注意属性变量需要#
}
}