vuecli3引⼊全局scss变量_利⽤scss公共库实现样式和业务组
件解耦，快速提⾼开发。。。
⼀款好的效率⼯具应该具备哪些特点？
简单
解决重复性问题，让我们早下班
⾸先我们来写⼀个简单的vue组件
这是⼀个H5分享的链接模拟组件
<template>
<div
class="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-image
class="image-content"
:src="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{
.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、
我们能不能像个办法 把这些常⽤的样式全部集成，这样我们就可以把所有的样式都从公共类中引⽤了。
有办法
---- 把⾼频的样式集成到⼀个公共样式⽂件中
我们做了⼀个公共样式⽂件， ⼏乎所有⾼频的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-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;
css变量
$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消失了。
<div
class="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-image
class="w-100p h-100p"
:src="image"
fit="cover"
/>
</div>
</div>
</template>
<script>
export default {
...
};
</script>
⼏乎不⽤针对div去写样式，全部从公共库中引⼊即可。
我们做了⼀款⼩⼯具 css-cli 可以直接拉取模板到本地
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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。