scss 导入重复执行多次_SCSS — 缩减50%的样式代码

作者: feishi123 https://github.com/fengshi123/blog/issues/8

前言

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就不会在编译时单独编译这