关于sass/scss的一些使用方法

SASS格式及嵌套：

sass中可以定义变量且以 “$”开头 $变量名：变量值，例如$w：200px变量可以来表示一个宽度变量。
sass支持嵌套写法：

<div class="nav">
	<ul>
		<li><a href="#">aaa</a></li>
		<li><a href="#">bbb</a></li>
		<li><a href="#">ccc</a></li>
	</ul>
</div>	

.nav{
	width:600px;
	border:1px solid #fafafa;
	ul{
 		overflow:hidden;
 		li{
			float:left;
			&:nth-child(1){  /* 此处 & 代表li元素，有些类似js的this */
				background:red;
				a{color:white};
			}
			&:nth-child(2){
				background:yellow;
				a{color:pink};
			}
			&:nth-child(3){
				background:grey;
				a{color:purple};
			}
		}
 	}
}

导入SASS文件：

• sass 被导入的文件，要以_开头，sass编译器不会编译该css文件。
  当这个文件发生了变化，编译器会重新编译引用了这个文件的scss文件。

• 导入sass文件时，可以省略_ 和后面的扩展名。例如：_color.scss 文件，引用时可以如下引用

 @import “color”

SASS 的扩展：

SASS的extend

如果想复用已经写好的样式可以使用@extend。 @extend 加上面出现的选择符；

div.box{
	width:500px;
	height:300px;
	margin:0 auto;
	border:2px solid black;
	}
div:nth-of-type(2) {
	@extend div.box;
	}

SASS 的mixin：

定义一个mixin ,同时设定多个css属性，可以设置固定样式，也可以设置带有参数的可变样式。
设置固定样式的mixin写法如下：

/* 设置字体样式 */
@mixin setFont{
	font-family:Arial;
	font-weight:bold;
	font-size:20px;
	color:#333;
	}
/* 引用 @mixin 时需要用 @include + 名称 */
.commonFont{
	@include setFont;
	}

当设置可变样式时，需要传参

/* 设置三属性 */
@mixin setProps($w, $h, $bgc) {  /* 参数可以设置默认值 $bgc:red,此时传实参时，可将默认参数位置省略，否则不能省略对应位置的参数。 */
	width: $w;
	height:$h;
	background-color:$bgc;
}
div {
	@include setProps(100px, 100px, red);
}

其中$w,$h,$bgc均为变量，此处设为形参。