经常看到sass就想学一学

基本写法

名称	格式
变量	$color:#255,0,0
对象	@extend
套娃	>
父选择器	&
选择器	~ , > , +
嵌套	（ : ）相当于( - )
导入	@import
默认值	!default
混合器	@mixin @include
对象	$obj(key1 val1,key2 val2)

用法1 类似变量

$my-width:100px;

.my-css{
	min-width:$my-width
}

用法2 套娃

#content .article{…} 可以写成下面的形式

#content{
	.article{
		h1,h2{font-size:10px}
		p{font-size:20px}
	}
}

用法3 父选择器&

#content{
	color:red;
	&:hover{color:green}
}

用法4 css的各类选择器

article {
	~ article { border-top: 1px dashed #ccc }
	> section { background: #eee }
	dl > {
		dt { color: #333 }
		dd { color: #555 }
	}
	nav + & { margin-top: 0 }
}

用法5 嵌套

简化border-style border-width border-color这些属性的写法

//简化版
nav {
	border: {
		style: solid;
		width: 1px;
		color: #ccc;
	}
}

//编译成
nav {
	border-style: solid;
	border-width: 1px;
	border-color: #ccc;
}

用法6 @import

意味着所有相关的样式被归纳到了同一个css文件中
使用sass的@import规则并不需要指明被导入文件的全名

.blue-theme {@import "blue-theme"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

用法7 !default

$fancybox-width: 400px !default;
.fancybox {
	width: $fancybox-width;
}

用法8 混合器

混合器使用 @mixin 标识符定义 混合器

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

//编译成
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}