sass 总结

sass规则：

sass vs scss：
sass 类似stylus
scss 类似css

@import：
@import reset.css 使用css的@import
@import a.scss 使用sass的@import

嵌套:
选择器嵌套
属性嵌套

a{
	border: {
		left: {
			width: 1px;
			style: solid
			color: red;
		}
	}
}
a{
	border-left: 1px solid red;
}

& 代表当前元素

a{
	color: red;
	&:hover{
		color: blue;
	}
}
a{
	color: red;
}
a:hover{
	color: blue;
}

属性命名空间：

a{
	font: {
		size: 30px;
		weight: bold;
	}
}
a{
	font-size: 30px;
	font-weight: bold;
}

变量

$w: 30px
a{
	width: $w;
}

$dir: top;
a{
	border-#{$dir}: 1px solid #ccc;
}
a{
	border-top: 1px solid #ccc;
}

多变量

//list
$color: red blue;
a{
	color: nth($color, 1);
	&:hover{
		color: nth($color, 2)
	}
}
a{
	color: red;
}
a:hover{
	color: blue;
}
//map
$headers: (h1: 2em, h2: 1.5em);
@each $header, $size in $headers{
	#{$header}{
	font-size: $size;
	}
}
h1{
	font-size: 2em;
}
h2{
	font-size: 1.5em;
}

在选择器中声明的变量会覆盖外面全局声明的变量

mixin: 混入整个代码块，类似一个函数

@mixin marginstyle{
	margin-left: auto;
	margin-right: auto;
}
a{
	@include marginstyle
}
a{
	margin-left: auto;
	margin-right: auto;
}
带参数
@mixin opacity($opc: 50){
	opacity: $opacity/100;
}
a{
	@include opacity; //默认值50
}
a{
	@include opacity(80); //参数80
}
多参数
@mixin layout($border:1px dashed red, $padding: 10px){
	border-bottom: $border;
	padding-top: $padding;
	padding-bottom: $padding;
}
.a{
	@include layout($border:1px solid blue);
}
.b{
	@include layout($padding:14px)
}

函数：

$fontsize: 75px;
@function rem($px){
	@return $px / $fontsize * 1rem
}
body{
	font-size: $fontsize;
}
a{
	font-size: rem(20px);
}

运算：
加减乘除
数值，颜色，变量