利用scss公共庫實現樣式和業務組件解耦，快速提升開發效率！

時間 2019-11-06

標籤利用 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>
複製代碼

解析這個組件

這個組件的樣式由兩部分組成：css

一、組件內部樣式
二、公共樣式（ellipsis）。

咱們發現雖然咱們能夠引入公共樣式來減小咱們的代碼量。可是公共樣式只能針對一些特定的要求去引，好比超過長度省略ellipsis，或者一些全局公共的樣式。若是是結合業務UI的需求，並不能很好知足。前端

這是一個很廣泛的問題，其實也是一個痛點。由於這個痛點，咱們不得不在每個組件中都寫大量的與業務UI耦合的css代碼

若是css和業務不解耦，做爲前端幾乎每一天的工做有至關的時間都在寫這種css

那麼有沒有一個方法能夠減小咱們的業務css的代碼量讓咱們效率提升，早點下班。讓咱們早點見到本身的女友、老婆、孩子、媽媽（單身狗也能夠早點回去撩妹）。

它的痛點

對於每個div 咱們都要寫對應的css類。這個在開發的過程當中很是浪費時間，而且很差維護。

咱們發現項目的樣式和組件耦合，致使每個組件都有大量的css ,在這些css中絕大部分都是font-size、 padding 、margin、flex、color...vue

咱們能不能像個辦法把這些經常使用的樣式所有集成，這樣咱們就能夠把全部的樣式都從公共類中引用了。git

有辦法

---- 把高頻的樣式集成到一個公共樣式文件中github

咱們作了一個公共樣式文件，幾乎全部高頻的css都放進去了。npm

它以下類型的css屬性：element-ui

├─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函數，能夠實現對一些常見類的遍歷，經過編譯批量輸出。如：bash

$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;
複製代碼