sass

前提：先安装ruby

sudo gem  install -g sass
sass -v
cd css
//scss -----css
sass --watch index.scss:index.css

---

sass规则

• &:父级同级选择器

<div class="header info">
	<div class="inner">
		看&的实用
	</div>
</div>

css:
.header{
	&.info{
		.inner{
			color: yellow;
		}
	}
}

• 结果文字为黄色
• 需要注意的是，要自己用命令行编译sass为css

---

• @extend:继承

 <p>测试@extend</p>
 
 css样式
 .bgdred{
	background: red;
}
p{
	@extend .bgdred;
}

• 测试结果：背景色为红色

---

变量必须要使用$n开始，例如：$n,$var

---

使用@mixin命令，定义一个代码块。

@mixin round1($vert,$horz,$radius:10px){
	border-#{$vert}-#{$horz}-radius: $radius;
	-moz-border-radius-#{$vert}#{$horz}:$radius;
	-webkit-border-#{$vert}-#{$horz}-radius:$radius;
}
.border{@include round1(top,left,35px);
	width: 100px;
	height: 100px;
	background: yellow;
	/*border-width: 2px;
	border-color: pink;
	border-style: solid;*/
}

• 测试结果：背景色为红

http://www.ruanyifeng.com/blog/2012/06/sass.html
https://note.youdao.com/web/#/file/WEB737a92d82a8c49ad17b36a57b502b73b/note/WEB5e9eca45ee44abb79073ff3f74ea1e3e/