// Sass CSS预处理器，主要功能减少一些重复性的工作// 0. 变量$col-red: red;div {	color: $col-red;	background: $col-red;}// 1. sass文件导入 不加后缀也可以 @import "sass/colors.scss";  	// 2. 在一个类名导入一个sass.blue {	@import "blue-theme";}//  3. 实时监听命令： $ sass --watch test.scss:test.css  //  动态编译css，生成新的css样式//  4. 基本操作//  4.1 嵌套操作: 相当于 #big #nav 这样的。嵌套避免重复写父类选择器#big {   	#nav {		color: red;   // 在sass可以这样当行注释，它会帮你编译 成/**/	}	li {		color: black;		a {			color: blue;			...// 继续写下去		}	}	...// 继续写下去随意嵌套}// 结果： #big #nav { color: red }; #big li {color:black;}  #big li a {color:blue;} //  4.2 （&） 操作符//  就是父类选择器的一个别名#big {	&-good {   /* &是父选择器名字，&-good 是id 还是class 继承父类选择器 */		color: pink;	}}// 结果： #big #big-good {color:pink;}	// 4.3 属性嵌套font:(这里可以设置属性，下面就没必要设置了) {		family: Arial;		size: 30em;		weight: bold;}// 结果 font-family: Arail; 以此类推// 类似border: 2px solid {	color: #000;	left: 0;  // border-left}// 4.4 注释规则// 单行注释  如果加上！代表版权信息$version = 14.1.14;/* version #{$version} */ 解析变量// 小技巧.container {	h1,h2,h3 {}  // h1.container h2.container h3.container}// 4.5群组选择器   article {	~ article {}  // article ~ artile	> section {}  // article > section	dl > {		dt{}	}	nav + & {}}$fa: 400px !default; // 如果已经有了这个变量, 这个变量就无效，否则就是用这个变量// 混合器：包含多个公告样式@mixin round {	-moz-border-radius:5px;	-webkit-radius:5px;	border-radius:5px;}// 混合器使用方法#div1,#div2 {	@include minxin; // 直接调用即可}// 混合器传参数@mixin link-colors($normal,$hover,$visited) {	color: $normal;	$:hover {color:$hover};	$:visited {color:$visited};}a {	@include link-colors(blue,...); // 直接用就完事了}// 继承样式: // 使用场合：两个类相同样式用继承@extend .error; // 继承.error 全部样式.error {	color: white;	background: red;	font-size: 12px;}.div1,.div2 {	@extend .error;}