利用scss公共库实现样式和业务组件解耦, 快速提高开发效率!

4,676 阅读5分钟

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

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

首先我们来写一个简单的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>

解析这个组件

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

  • 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>
  <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样式数量也几乎可以做到减少一半

团队使用情况

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

总结

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