SCSS 介绍

SCSS 之类的预处理器本身就是为了生成 CSS 而设计的。它的优势在于开发效率高。对于一些样式复杂的站点，用 SASS 之类的工具生成代码比手写 CSS 快得多。但是 SASS 不是为了取代 CSS 而生的，它是为了服务 CSS 而生

/*将variables引入到当前css文件*/
@import './variables.scss';
/*SASS提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化*/
/*
混合（Mixin）用来分组那些需要在页面中复用的CSS声明，
开发人员可以通过向Mixin传递变量参数来让代码更加灵活，
该特性在添加浏览器兼容性前缀的时候非常有用，SASS目前使用@mixin name指令来进行混合操作。
*/

@mixin colorBtn($color) {
  background: $color;
 /* Scss使用"&"关键字在CSS规则中引用父级选择器，例如在嵌套使用伪类选择器的场景下*/
  &:hover {
    color: $color;

    &:before,
    &:after {
      background: $color;
    }
  }
}

.blue-btn {
  @include colorBtn($blue)
}

继承

继承是SASS中非常重要的一个特性，可以通过@extend指令在选择器之间复用CSS属性，并且不会产生冗余的代码，下面例子将会通过SASS提供的继承机制建立一系列样式：

// 这段代码不会被输出到最终生成的CSS文件，因为它没有被任何代码所继承。
%other-styles {
  display: flex;
  flex-wrap: wrap;
}

// 下面代码会正常输出到生成的CSS文件，因为它被其接下来的代码所继承。
%message-common {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-common;
}

.success {
  @extend %message-common;
  border-color: green;
}

.error {
  @extend %message-common;
  border-color: red;
}

.warning {
  @extend %message-common;
  border-color: yellow;
}