十分钟掌握sass

变量、嵌套（选择器、属性）、混合器、继承、函数指令 sass (sass编写清晰、无冗余、语义化的css)

1. 变量

• 变量声明 使用 $
• 变量名用中划线分隔，（实际中划线和下划线互通）

2. 嵌套（避免css中重复写选择器，且使样式可读性更高）

• 父选择器的标识符&

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

• 群组选择器的嵌套: ,
• 子组合选择器和同层组合选择器：>、+和~

2.1. 属性嵌套（嵌套属性的规则：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。）

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

• 指明例外规则：

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

3. 导入SASS文件

• sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器,均可在导入文件中使用
• sass局部文件的文件名以下划线开头

4. 混合器 (例如一致的颜色和字体使用变量来统一处理，大段大段的重用样式的代码，通过sass的混合器实现大段样式的重用)

• @mixin标识符定义
• @include来使用这个混合器
• 何时使用混合器
• 一段样式不停地重复写，那就应该把这段样式构造成优良的混合器，起个合适的混合器名字
• 给混合器传参
• 格式

 @mixin 混合器名(参数) {
 属性：参数
}

• example

 @mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

a {
  @include link-colors(blue, red, green);
}

5. 使用选择器继承来精简CSS //通过选择器继承继承样式

• 格式：@extend 类名
• 混合器主要用于展示性样式的重用，而类名用于语义化样式的重用
• example

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

6. 函数指令

• 格式

@function 函数名（形参）{
    @return ***;
}

• example

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

7. @for

@for $i from 1 through 1000 {
    .#{unique-id()}-#{$i} {
        ...
    }
}

8. keyframes 给keyframes定义一个混合宏(mixins)

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }
    @-o-keyframes #{$animationName} {
        @content;
    }
    @keyframes #{$animationName} {
        @content;
    }
}

<!--使用-->
@include keyframes(move-the-object) {
    0%   { 
        transform: translateX(0);
    }
    100% { 
        transform: translateX(200px); 
    }
}