Sass(Syntactically Awesome StyleSheets)是一种CSS预处理器，即CSS扩展语言，拥有比CSS更多的功能和特性，来帮助我们更好的组织管理样式文件、更高效地开发项目。SCSS(Sassy CSS)是Sass的一种语法格式，文件后缀名是.scss，也是本文所用格式。SCSS在传统CSS3语法基础上进行拓展，所有的CSS3语法在SCSS中都是通用的。

本文总结了SCSS实践经验分享给大家，希望大家在工作中使用SCSS提高自己的开发效率，真正能用好SCSS来减少样式代码。

1.变量的使用 $

你可以把反复使用的属性定义成变量，然后通过变量名来引用他们，而无需重复书写这一属性，在修改的时候，也只需要修改变量值这一个地方就行了，不用每个用到的地方都去修改。并且你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。

例子1：我们给sidebar的hover、active状态设置文字颜色和背景色，通过变量名我们能明显看出来哪个对应状态设置了什么颜色值。

$menuBg: transparent;
$menuText: #eee;
$menuActiveText: #fff;
$subMenuBg: transparent;
$subMenuHover: #001528;
$subMenuActiveText: #f4f4f5;
复制代码

例子2：组件库主题颜色值或字体大小等，定义为全局变量，实现“一键换肤”（统一更改）。

$color-primary: #2f7cf6;
$color-success: #7eb593;
$color-warning: #f4e82d;
$color-danger: #e00505;
$color-info: #6076ac;
复制代码

例子3：设置背景图片的时候路径比较长，而且每次移动图片都要去每个用到的地方更改图片路径，把图片路径设置为变量，既美观又方便我们修改。

$imgUrl: '~@/assets/img/';
$title-bg: $imgUrl+'title-bg.png'
复制代码

2.导入文件 @import

@import规则

CSS：执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。
SCSS：在生成CSS文件时就把相关文件导入进来，所有相关样式都在一个CSS文件中，无需发起额外的下载请求，导入语句也可以省略文件后缀名。

@import './base.scss';
@import './common.scss';
@import './layout.scss';
@import './adjust';
复制代码

局部文件命名

局部文件即那些专门为@import命令而编写的文件，编译时不需要生成独立的CSS文件，这样的文件命名以下划线_开头，比如_variable.scss。

例子：一些用来存放动画、混合器、全局变量的文件，只会在其他地方引入，不需要单独编译输出css文件。

3.嵌套和父选择器标识符 &

SCSS的嵌套解决了我们重复写CSS选择器的问题，父级选择器标识符&也能帮我们轻松在子选择器里选到父选择器，如果你的类名采用的是BEM命名方式，&也能帮我们解决命名过于冗长的问题。

例子1：嵌套中使用伪类选择器。

.link{
  color: #333;
  &:hover{
    color:#1212ef;
  }
}
复制代码

例子2：解决BEM命名冗长问题。

.house{
  color: white;
  &_window{
    color: blue;
  }
  &_door{
    color: gray;
  }
}
复制代码

例子3：群组选择器的嵌套。

.container{
  h1, h2, h3 {margin-bottom: .8em}
}

.nav, .aside {
  a {color: blue}
}
复制代码

例子4：属性的嵌套，比如设置border-style、border-width和border-color，下面这样写就省略了重复代码border-。

.nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
复制代码

4.混合器的使用 @mixin和@include

当你的样式中出现大段的重复样式的代码或类似代码的时候，可以利用混合器来帮你实现样式复用。混合器可以传递参数，也可以设置默认参数，你可以根据你的需求定义各种混合器。

用@mixin定义好混合器，@include可以直接使用定义好的混合器。

例子：给元素设置背景图。

@mixin setBg($url: default, $size: 100% 100%, $posion: center) {
  background: $posion / $size url('~@/assets/img/'+$url+'.png') no-repeat;
}

.content{
  width: 640px;
  height: 300px;
  @include setBg('page/bg');
}
复制代码

5.选择器继承 @extend

选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式，它和混合器的主要区别是，混合器主要用于展示性样式的重用，而继承用于语义化样式的重用。

例子：我们有个.tag类，.tag-red类继承了.tag类的所有属性并且设置了字体颜色。

.tag{
  padding: 4px 10px;
  border-radius: 2px;
  border: 1px solid;
}
.tag-red{
  @extend tag;
  color: red;
}
复制代码

同时，.tag-red不仅会继承.tag自身的所有样式，任何跟.tag有关的组合选择器样式也会被.tag-red以组合选择器的形式继承。比如：

.tag span{ //应用到.tag-red span
  color: #666;
}
span.tag{ //应用到span.tag-red
  color: #333;
}
复制代码

6.插值 #{}

通过插值语句可以在选择器或属性名中使用变量。

例子：

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
复制代码

7.each遍历

通过遍历数组和maps数据结构，让我们减少写重复代码。

例子1：遍历数组，创建三个类名，分别设置文字居左、居中、居右。

$position: right, left, center;
@each $p in $position {
  .text-#{$p}{
    text-align: $p;
  }
}
复制代码

例子2：遍历maps数据结构，为不一样的标题设置不一样的字体大小。

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}
复制代码

8.在Vue中全局使用

要使用我们定义的全局变量或者混合器，则要在每个用到的.vue文件中去导入.scss文件，如果想要全局导入，就需要使用style-resources-loader。

首先安装style-resources-loader和vue-cli-plugin-style-resources-loader。

npm i style-resources-loader vue-cli-plugin-style-resources-loader
复制代码

然后在vue.config.js中配置

function resolve(dir) {
  return path.resolve(__dirname, dir)
}

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        resolve('src/styles/_variables.scss'),
        resolve('src/styles/_mixins.scss')
      ]
    }
  }
}
复制代码