十分钟掌握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);     }}复制代码