一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

使用sass的理由

CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且在代码也不方便维护。
Scss 引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

嵌套规则

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。
嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理。

.div {
    padding: 10px;
    .box {
        font-size: 16px;
    }
}

编译为

.div { padding: 10px; }
.div .box { font-size: 16px; }

属性嵌套

很多 CSS 属性都有同样的前缀，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。
在 Scss 中，我们可以使用嵌套属性来编写它们：

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

编译为

text-align: center;
text-transform: lowercase;
text-overflow: hidden;

父选择器 &

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

a {
  font-weight: bold;
  &:hover { text-decoration: underline; }
}

编译为

a { font-weight: bold; }
a:hover { text-decoration: underline; }

变量 $

变量用于存储一些信息，它可以重复使用。
变量以美元符号开头，赋值方法与 CSS 属性的写法一样。

$width: 100px;

#main {
    width: $width;
}

编译为

#main { width: 100px; }

继承 @extend

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。
如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。

.button-basic  {
  border: none;
  padding: 15px 30px;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

编译为

.button-basic, .button-report {
  border: none;
  padding: 15px 30px;
}

.button-report  {
  background-color: red;
}