Sass学习指南（一）

通过变量复用属性

$company-blue:#111111;
h1#brand{
	color:$company-blue;
}
#sidebar{
	background-color:$company-blue;
}

使用嵌套来快速写出多层次选择器

ul.nav {
  float: right;
  
  li {
    float: left;
    a {
      color: #111;
    }
    &.current {
      font-weight: bold;
    }
  }
}

这里&.current相当于li.current

混合器使用@mixin和@include重用代码

@mixin horizontal-list {
  li {
    float: left;
    margin-right: 10px;
  }
}

#header ul.nav {
  @include horizontal-list;
  float: right;
}

#footer ul.nav {
  @include horizontal-list;
  margin-top: 1em;
}

使用@mixin命令，可以将规则抽取出来放到一个合适的命名混合器中

在混合器中使用变量

@mixin horizontal-list($spacing: 10px) {
  li {
    float: left;
    margin-right: $spacing;
  }
}

#header ul.nav {
  @include horizontal-list;
  float: right;
}

#footer ul.nav {
  @include horizontal-list(20px);
  margin-top: 1em;
}

混合器添加参数$spacing，默认值为10px，可通过传值修改。

使用选择器继承来避免重复属性

.error{
	border:1px #f00;
	background:#fdd;
}

.error.intrusion{
	font-size:1.2em;
	font-weight:bold;
}

.badError{
	@extend:.error;
	border-width:3px;
}

!!!他会复用父类所有样式！！