sass知识点整理

sass 有两种后缀名文件：一种后缀名为 sass，不使用大括号和分号；另一种后缀名为 scss ，这种和我们平时写的 css 文件格式差不多，使用大括号和分号。建议使用后缀名为 scss 的文件，以避免 sass 后缀名的严格格式要求报错。

1、使用变量

sass使用$符号来标识变量

example:

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #F90;
}

实际开发中，将需要重复使用的样式值定义为变量，更有利于我们后期的维护。（比如产品经理跟你说现在的主体颜色不好看，换一个颜色时，你只需要去公共文件中找到这一主题颜色，修改即可，而不用去每个页面的样式文件中进行修改）

2、嵌套规则

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

HTML结构

<div id="content">
   <article>
     <h1></h1>
     <p></p>
   </article>
   <aside></aside>
</div>

3、混合器

使用场景：需要重复使用一段样式时

混合器使用@mixin标识符定义

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

//sass最终生成：

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}