【Sass】sass项目常用用法，新手常用

内容不定期更新
只展示在项目的初级用法，最常用的东西
更多高级内容还没有应用熟练，暂时不写，随时更新

变量

$color:red

.color{
	color：$color
}

嵌套

//css
div h1 {
　　color : red;
}

//sass
div {
　　　hi {
　　　　　　color:red;
　　　　}
　}

继承

.class1 {
　　　　border: 1px solid #ccc;
}

class2继承class1，使用@extend命令：

.class2 {
　　　@extend .class1;
　　　font-size:24rpx;
}

Mixin

@mixin定义

@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
}

@include引用

div {
　　　　@include left;
　}

带参数用法

@mixin flex($direction, $justify-content) {
    display: flex;
    flex-direction: $direction;
    justify-content: $justify-content;
}

div{
	@include flex(row,space-between);
}