SASS 教程

变量

- 声明变量
$nav-color:red
- 引入变量 
div{
   color:$nav-color
}

当你为链接之类的元素写:hover这种伪类时，你并不希望以后代选择器的方式连接。

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

// 编译后
article a { color: blue }
article a:hover { color: red }

>

选择article下紧跟着的子元素中命中section选择器的元素。

article > section { border: 1px solid #ccc }

+

同层相邻组合选择器+选择header元素后紧跟的p元素

header + p { font-size: 1.1em }

~

选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素

article ~ article { border-top: 1px dashed #ccc }

混合器 @mixin

@include指令会将引入混合器的那行代码替换成混合器里边的内容

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

ul.plain {
  color: #444;
  @include no-bullets;
}

@expand 继承

//通过选择器继承继承样式
.error {
  border: 1px red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}