Sass快速上手
前言
因使用Sass的地方越来越多，发现我们只是使用到了Sass的冰山一角，所以这里将其他实用的方法及案例列举出来，大家一起学习
特性概览
CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发，SASS提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。
变量
变量用来存储需要在CSS中复用的信息，例如颜色和字体。SASS通过$符号去声明一个变量。
使用案例（页面主要颜色辅辅颜色的定义）
$main-colors: #ff8c19;
$auxiliary-color: #00b6ff;
body {
background: $main-colors;
color: $auxiliary-color;
}
编译后
body {
background: #ff8c19;
color: #00b6ff;
}
嵌套
Sass允许开发人员以嵌套的方式使用CSS，但是过度的使用嵌套会让产生的CSS难以维护，因此是一种不好的实践。
使用案例（深度器选择）
把 .el-card 等样式类 /deep/ 选择器中使用，可读性更高，减少重复代码。
/deep/ {
.el-card {
transition: 0s;
}
.title-content .text-default {
margin: 0;
}
.el-icon-warning {
color: #ff8c19 !important;
margin-right: 10px !important;
}
}
编译后
/deep/.el-card {
transition: 0s;
}
/deep/.title-content .text-default {
margin: 0;
}
/deep/.el-icon-warning {
color: #ff8c19 !important;
margin-right: 10px !important;
}
引入
Sass能够将代码分割为多个片段，并以underscore风格的下划线作为其命名前缀（_partial.scss），Sass会通过这些下划线来辨别哪些文件是Sass片段，并且不让片段内容直接生成为CSS文件，从而只是在使用@import指令的位置被导入。CSS原生的@import会通过额外的HTTP请求获取引入的样式片段，而SASS的@import则会直接将这些引入的片段合并至当前CSS文件，并且不会产生新的HTTP请求。下面例子中的代码，将会在base.scss文件当中引入_reset.scss片断。
// _reset.scss
html, body, ul, ol {
margin: 0;
padding: 0;
}
// base.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
混合（方法）
混合（Mixin）用来分组那些需要在页面中复用的CSS声明，开发人员可以通过向Mixin传递变量参数来让代码更加灵活，该特性在添加浏览器兼容性前缀的时候非常有用，SASS目前使用@mixin name指令来进行混合操作。
使用案例 （设置圆角）
@mixin border-radius($radius) {
border-radius: $radius;
-ms-border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
.box {
@include border-radius(10px);
}
编译后
.box {
border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
继承
通过@extend指令在选择器之间复用CSS属性，并且不会产生冗余的代码，下面例子将会通过SASS提供的继承机制建立一系列样式：
// 下面代码会正常输出到生成的CSS文件，因为它被下面的代码所继承。
%flex-styles {
display: flex;
align-items: center;
justify-content: space-between;
}
// 这段代码不会生成CSS，因为它没有被任何代码所继承。
%message-common {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success-item {
@extend %flex-styles;
}
编译后
.success-item {
display: flex;
align-items: center;
justify-content: space-between;
}
嵌套规则
Sass允许CSS规则嵌套使用，父子规则将会呈现包含选择器的关系：
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
/deep/ {
.el-button {
color: #fff
}
.el-form {
color: #fff
}
.el-dialog {
color: #fff
}
}
编译后
#main p {
color: #00ff00;
width: 97%;
}
#main p .redbox {
background-color: #ff0000;
color: #000000;
}
/deep/.el-button {
color: #fff
}
/deep/.el-form {
color: #fff
}
/deep/.el-dialog {
color: #fff
}
引用父级选择器&
Sass使用$关键字在CSS规则中引用父级选择器，例如在嵌套使用伪类选择器的场景下：
.el-tag {
&-success {
background:#67c23a;
}
&-info {
background:#909399;
}
&-warning {
background:#e6a23c;
}
}
编译后
.el-tag-success {
background:#67c23a;
}
.el-tag-info {
background:#909399;
}
.el-tag-warning {
background:#e6a23c;
}
& 进阶用法
当父级选择器列表不存在的时候，&运算符的值为null，使用mixin当中可以通过该特性判断父选择器列表是否存在。
@mixin does-parent-exist {
@if & {
&:hover {
color: red;
}
} @else {
a {
color: blue;
}
}
}
插值 #{}
开发人员可以通过插值（interpolation）
#{}在选择器和属性名称中使用 SassScript 变量。
$name: uinika;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
// 编译后
p.uinika {
border-color: blue;
}
还可以使用
#{}将 SassScript 放入属性值，大多数情况下这种方式并不优于变量，但是使用#{}意味着其附近的任意操作都将被视为普通 CSS，例如：
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
// 编译后
p {
font: 12px/30px;
}