vuecli3 引入全局scss变量_利用scss公共库实现样式和业务组件解耦，快速提高开发效率！...

一款好的效率工具应该具备哪些特点？

简单
解决重复性问题，让我们早下班

首先我们来写一个简单的vue组件

这是一个H5分享的链接模拟组件<template><divclass="main"@click.stop="link"><div class="conten-box ellipsis"><div class="title ellipsis">{{ title }}</div><div class="content ellipsis">{{ content }}</div></div><div class="image-box"><el-imageclass="image-content":src="data:image"fit="cover"/></div></div>
</template>
<script>
export default {...
}
</script>
<style lang="scss" scoped>
.ellipsis{} //
.main{display: flex;cursor:pointer;.content-box{flex:1;flex-direction: column;}.title{font-size:16px;font-weight: bold;color:#485465;line-height: 20px;margin-bottom: 8px;margin-top:12px;}.content{font-size:14px;color:#485465;line-height: 18px;}.image-box{width: 64px;height:64px;margin-left: 20px;border-radius: 2px;overflow: hidden;}.image-content{width: 100%;height:100%;}}
</style>

解析这个组件

这个组件的样式由两部分组成： 1、组件内部样式 2、公共样式（ellipsis）。

我们发现虽然我们可以引入公共样式来减少我们的代码量。但是公共样式只能针对一些特定的要求去引，比如超过长度省略ellipsis，或者一些全局公共的样式。如果是结合业务UI的需求，并不能很好满足。

这是一个很普遍的问题，其实也是一个痛点。因为这个痛点，我们不得不在每一个组件中都写大量的与业务UI耦合的css代码

如果css和业务不解耦，作为前端几乎每一天的工作有相当的时间都在写这种css

那么有没有一个方法可以减少我们的业务css的代码量让我们效率提高，早点下班。让我们早点见到自己的女朋友、老婆、孩子、妈妈（单身狗也可以早点回去撩妹）。

它的痛点

对于每一个div 我们都要写对应的css类。这个在开发的过程中非常浪费时间，并且不好维护。

我们发现项目的样式和组件耦合，导致每一个组件都有大量的css ,在这些css中绝大部分都是font-size、 padding 、margin、flex、color...

我们能不能像个办法把这些常用的样式全部集成，这样我们就可以把所有的样式都从公共类中引用了。

有办法

---- 把高频的样式集成到一个公共样式文件中

我们做了一个公共样式文件，几乎所有高频的css都放进去了。

它如下类型的css属性：

├─scss-common
|      ├─border.scss 配置border
|      ├─color.scss  配置color
|      ├─default.scss 默认变量配置
|      ├─flex.scss 配置flex
|      ├─fontSize.scss 配置字体
|      ├─heightWidth.scss 配置高宽
|      ├─index.css scss打包成css
|      ├─index.min.css  sccs 打包成压缩css
|      ├─index.scss  入口
|      ├─marginPadding.scss 配置间距
|      ├─other.scss 配置其它
|      └position.scss 配置position

原理：我们通过scss函数，可以实现对一些常见类的遍历，通过编译批量输出。如：

$color-0 :#fff;
$color-1 :#4c84ff;
$color-2 :#485465;
$color-3 :#78879c;
$color-4 :#a8b4c4;
$color-5 :#FFB6D4;
$color-6 :#c3cdd9;
$color-7 :#e7ebf1;
$color-8 :#f7f8fd;
$color-9 :#f4f9ff;
$color-10 :#37c6b0;
$color-11 :#ffb64d;
$color-12 :#fa5555;
$color-13 :#959FAE;
$color-14:#F7F7FA;
$color-15:#FFFBF6;
$color-16:#D4DAE2;
$color-17:#FDF7F0;
$color-18:#B5C1D2;$color-list:(
(0,$color-0),
(1,$color-1),
(2,$color-2),
(3,$color-3),
(4,$color-4),
(5,$color-5),
(6,$color-6),
(7,$color-7),
(8,$color-8),
(9,$color-9),
(10,$color-10),
(11,$color-11),
(12,$color-12),
(13,$color-13),
(14,$color-14),
(15,$color-15),
(16,$color-16),
(17,$color-17),
(18,$color-18),
);@each $label,$value in $color-list {.col-#{$label} {color: $value};.bg-#{$label} {background:$value;}
}

使用这个公共库我们来写前面的组件，可以看到 style消失了。

<template><divclass="flex":class="url ? 'pointer' : ''"@click.stop="link"><div class="flex1 flex-col ellipsis"><div class="f-s-16 bold col-2 l-h-20 m-b-8 m-t-12 ellipsis">{{ title }}</div><div class="f-s-14 col-2 l-h-18 ellipsis">{{ content }}</div></div><div class="w-64 h-64 m-l-20 brs2 overflow-hidden"><el-imageclass="w-100p h-100p":src="data:image"fit="cover"/></div></div>
</template>
<script>
export default {...
};
</script>

几乎不用针对div去写样式，全部从公共库中引入即可。

我们做了一款小工具 css-cli 可以直接拉取模板到本地

https://github.com/yangfan0095/css-cli.git

npm i -g css-cli

css-cli create [生成的css文件夹名]

可以生成css 模板和 scss 模板

使用方式是将这个文件夹放入自己的项目中。因为我们想的是可以最大化自定义，所以相当于给的是一个基础的css 。使用者可以根据自己的实际情况去配置里面的css的渲染数量,如：

@for $num from 0 through 150 {.w-#{$num} {width: #{$num}px;}.min-w-#{$num} {min-width: #{$num}px;}.max-w-#{$num} {max-width: #{$num}px;}.h-#{$num} {height: #{$num}px;}.min-h-#{$num} {min-height: #{$num}px;}.max-h-#{$num} {max-height: #{$num}px;}
}

直接使用scss-package 快速引入

step1: npm i scss-package --save

step2: 在项目中新建scss文件 index.scss, 在引入头部配置默认变量即可

// 自定义scss 变量设置
$color-list:(
(0,#fff),
(1,#333),
(2,#666),
(3,#999),
(4,#fb685d),
(5,#12C286),
(6,#E5E5E7),
);$maxHeightWidth : 200;
@import '~scss-package/index.scss'

变量配置表

// border-radis 配置
$minBrs : 0;
$maxBrs : 150;
$brsList : 50,60;// 配置颜色
$color-list:(
(0,#fff),
(1,#333),
(2,#666),
(3,#999),
);// 配置flex
$minFlex : 0;
$maxFlex : 10;// 配置字体大小
$minFontSize : 0;
$maxFontSize : 50;
$fontSizeList: 100,200,300,400,500,600;// 配置宽高
$minHeightWidth : 0;
$maxHeightWidth : 150;
$heightWidthList : 160,170,180,190,200,250,300,350,400,45,500,550,600,700,800,900;// 配置间距
$minMarginPadding : 0 ;
$maxMarginPadding : 30 ;
$marginPaddingList : 40,50,60,70,80;// 配置距离
$minPosition : 0;
$maxPosition : 50;
$positionList :60,70,80,90,100;

more 可以直接看源文件覆盖即可

scss-package

Question

1 这样css报会不会很大？

答：大小是可以自己控制的，默认只有30kb.

比如height、width这两个属性默认配置1--150 以及 160,170,180,190,200,250,300,350,400,45,500,550,600,700,800,900。基本能满足实际需求，如果需要可以自己扩大缩小。

真实的使用体验

对于一般管控系统比如基于element-ui ant-design 基本可以做到几乎不用写额外的样式对于H5 css样式数量也几乎可以做到减少一半

团队使用情况

目前内部有三个项目都使用这种方式，效果良好。

总结

只需要引入一个公共文件足够简单
几乎每一个项目都能用到这些公共样式使用足够高频
自从用了它，可以早点下班啦！