scss-基本语法

文件

scss文件分为两种：

1. 部分文件，文件名以_开头，可以被多个文件引用；比如_part1.scss，_part2.scss。
2. 文件，可以是.sass或者.scss；page.sass，page.scss。

使用@import指令导入文件。

变量

变量以$符号开头；比如：$default-color，$font-size。
变量值以!default结尾表示默认值。$default-color:#333 !default;。

混合器

使用@mixin定义混合器，使用@include调用混合器。
例如：

@mixin button{
	width:100px;
	height:80px;
}

.a-button{
	@include button
}

最终解析成：

.a-button{
	width:100px;
	height:80px;
}

当然，混合器也可以带参数，参数还可以设置默认值，例如：

@mixin button-size($width:100px,$height:80px){
	width:$width;
	height:$height;
}

.a-button{
	@include button(200px,160px)
}

最终解析成：

.a-button{
	width:200px;
	height:160px;
}

嵌套语法

可以使用嵌套语法来指定后代选择器。
原生的css使用后代选择器是这样的：

.a{
	background-color:#666;
}
.a .b{
	background-color:#666;
}
.a .b .c{
	background-color:#666;
}
.a .b .c .d{
	background-color:#666;
}

但是使用scss的后代选择器的语法是这样的：

.a{
	background-color:#666;
	.b{
		background-color:#666;
		.c{
			background-color:#666;
			.d{
				background-color:#666;
			}
		}
	}
}

这样可以避免多次写重复的选择器。
父选择器&
定义伪类选择器的时候需要用到父选择器&：

a-input{
	width:100px;
	height:80px;
	&:hover{
		background:gray;
	}
	&:focus{
		background:white;
	}
}

vue正确使用姿势

vue配置全局sass，参考css.loaderOptions和向预处理器 Loader 传递选项

这样只需要在vue中配置全局main.scss就可以使用所有的scss样式了。