// 变量
// 通过变量来复用属性值、集中管理、便于皮肤改版
$font-family-global:Microsoft Yahei,"\5FAE\8F6F\96C5\9ED1",arial;
$space:12px;
$yellow:#FFA100;
// 嵌套
// 通过嵌套来避免在选择器中重复写相同的元素
.new{
	@include border-radius(20px);// “compass/css3” 模块
	color: $text-color-normal;
	.new-title{
		font-size: $font-size;
		// 使用 @at-root 将该类 提前到嵌套之外
		@at-root .new-title-second{
			font-size:  $font-size * 0.5;
		}
	}
}
// 混合器（有冗余）
// 复用一大段规则，但是输出的 css 在每一个包含进来的敌方，都会复制一段样式
@mixin horizontal-list {
	li {
		float: left;
	}
}
#header ul.nav{
	@include horizontal-list;
	float: right;
}
// 带参数、默认参数的混合器
@mixin table-padding($spacing: 10px){
	tr,th{
		padding: $spacing;
	}
}
.content-table{
	@include table-padding;
}
// 继承
// 可以通过选择器继承减少冗余
// 解决了使用混合器是每次都复制样式的问题
.btn{ // 输出的css中有 .btn 样式
	border:none;
	padding: 10px 20px;
}
.btn-default{
	@extend .btn;
	background-color: #fff;
	color: red;
}
.btn-pirmary{
	@extend .btn;
	background-color: #000;
	color: white;
}
// 使用占位符避免输出 “父类”
%button-reset { // 输出的css中没有 .button-reset 样式
	margin: 0;
	padding: .5em 1.2em;
	text-decoration: none;
	cursor: pointer;
}
.save {
	@extend %button-reset; 
	color:white;
	background-color: $body-bg;
}
// 使用插值
@mixin thing($class, $prop){
	.thing.#{$class} {
		prop-#{$prop}:val;
	}
}
@include thing(foo, bar);

article a{
	color: blue;
	&:visited{color:#555}
	&:focus{color:#f00;}
	&:hover{color:red}
	&:active{color:#f00}
}

@import "compass/utilities/sprites"
@import "icons/*.png";
// 为每个精灵撰写必要的CSS(background-image, background-position)
@include all-icons-sprites
// 单数精灵输出css
.add-button{
	@include icons-sprite(box-add);
}
// 配置 compass 精灵
// 间距
$icons-spacing: 4px;
// 设置精灵地图布局
$icons-layout: smart;
// 改变默认基础类(.icons-sprites)
$icons-sprite-base-class: ".spritey-mcspriterson";
// 使用精灵辅助器（最佳实践）
$icons: sprite-map("icons/*.png", $layout: smart);
// 撰写精灵的CSS
.next{
	background: sprite($icons, arrow) no-repeat; 
}