利用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{
        width: 64px;
        height:64px;
        margin-left: 20px;
        border-radius: 2px;
        overflow: hidden;
    }
    .image-content{
        width: 100%;
        height:100%;
    }

}
</style>
复制代码

解析这个组件

这个组件的样式由两部分组成 ：

• 一、组件内部样式
• 二、公共样式（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>
  <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 能够直接拉取模板到本地

github.com/yangfan0095…

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样式数量也几乎能够作到减小一半

团队使用状况

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

总结

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