Scss 缩减50%样式代码的实战经验总结

前言
Sass是css3语言的扩展，它能帮你更省事地写出更好的样式表，使你摆脱重复劳动，使工作更有创造性。
因为你能更快地拥抱变化，你也将敢于在设计上创新。你写出的样式表能够自如地应对修改颜色或修改html标签，并编译出标准的css代码用于各种生产环境。
Sass语法比较简单，难点在于如何将Sass运用到实际项目中，解决css存在的痛点，从而提高我们效率。经过实际项目的摸索，总结了以下14条实践经验进行分享，希望能帮助大家扩宽思维，更好地将Sass运用到实际项目中。
在项目中，我们使用支持传统的类css语法—— Scss，所以以下项目经验总结分享以Scss为例。
1、变量 $ 使用
我们可以通过变量来复用属性值，比如颜色、边框大小、图片路径等，这样可以做到更改一处，从而进行全局更改，从而实现“换肤”的功能。
实例1：我们的组件库，利用变量配置，进行统一更改组件的颜色、字体大小等（换肤）：

$color-primary: #3ecacb;
$color-success: #4fc48d;
$color-warning: #f3d93f;
$color-danger: #f6588e;
$color-info: #27c6fa;

实例2：图片的配置及全局引入
Scss中图片的使用，可能存在以下2个问题：
（1）如果样式文件和使用该样式文件的vue文件不在同一目录会出现图片找不到
（2）如果将图片路径配置变量写在vue文件的style中，但是该写法导致图片和样式分离
我们可以采用将图片路径写成配置文件，然后进行全局引入，这样可以统一更改图片路径（并且该方法只会在使用相应图片时进行加载，不会导致额外性能问题）：

$common-path: './primary/assets/img/';
$icon-see: $common-path+'icon-see.png';
$icon-play: $common-path+'icon-play.png';
$icon-comment: $common-path+'icon-comment.png';
$icon-checkbox: $common-path+'icon-checkbox.png';

2、@import导入Scss文件
（1）css中的@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。
（2）Scss中的@import规则，不同的是，scss的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。
实例1：组件库中统一将组件的样式文件import进index.sccs中，然后如果项目中有使用组件库的地方只需要在项目的入口处，引入index.scss文件，如下所示在index.scss文件中引入各组件的样式文件：

@import "./base.scss";
@import "./webupload.scss";
@import "./message-hint.scss";

3、局部文件命名的使用件
scss局部文件的文件名以下划线开头。这样，scss就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。在使用scss时，混合器mixins是最适合的使用场景，因为混合器不需要单独编译输出css文件。
实例1：将混合器的名称写成局部文件命名的方式，如下图所示：

4、Scss的嵌套功能和父选择器标识符*
我们可以使用嵌套功能和父选择器标识符 & 来缩减重复的代码，特别如果你CSS类采用BEM命名规范，样式类命名存在冗长的问题。使用此功能，能解决BEM命名冗长的问题，且样式可读性更高。
实例1：嵌套功能和父选择器标识符 & 解决BEM冗长问题：

.tea-assignhw {
   
&__top {
   
margin: 0;
}
&__content {
   
padding-left: 45px;
}
&__gradeselect {
   
width: 158px;
}
}

实例2：嵌套中使用子选择器、兄弟选择器和伪类选择器
（1）子选择器

&__hint {
   
  margin: 20px;
  font-size: 14px;
  > p:first-child {
   
     font-weight: bold;
 }
}

（2）兄弟选择器

&__input {
   
width: 220px;
& + span {
   
margin-left