SASS入门

变量

sass中可以定义变量，方面统一修改和维护

$primaryColor:#222;

body{
	color:$primaryColor
}

嵌套

sass可以进行选择器嵌套，表示层级关系，看起来很优雅整齐。

	nav{
		ul{maring:0;padding:0;list-style:none;}
		li{display:inline-block;}
		a{
			display:block;
			padding:6px 12px;
			text-decoration:none;
		}
	}

导入

sass中导入其他sass文件，最后编译一个css文件，优于纯css的@import

html,
body,
ui,
ol{
	margin:0;
	padding:0;
}

@import 'reset';
body{
	font-size: 100%;
	background-color:#efefef;
}

mixin

sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用，从此处理css3的前缀兼容轻松便捷。

@mixin box-sizing($sizing){
	-webkit-box-sizing:$sizing;     
       -moz-box-sizing:$sizing;
            box-sizing:$sizing;
}
.box-border{
	border:1px solid #ccc;
	@include box-sizing(border-box);
}

扩展/继承

sass可以通过@extend来实现代码组合声明，使代码更加优越简洁。

.message{
	border:1px solid #ccc;
	padding:10px;
	color:#333;
}
.success{
	@extend.message;
	border-color:green;
}

运算

sass 可进行简单的加减乘除运算等

.container{width:100%}
article[role="main"]{
	float:left;
	width:600px/960px*100%;
}
aside[role="complimentary"]{
	float:right;
	width:300px/960px*100%;
}

颜色

sass中集成了大量的颜色函数,让变换颜色更加简单

$linkColor:#08c;
a{
	text-decoration:none;
	color:$linkColor;
	$:hover{
		color:darken($linkColor,10%);
	}
}