一、背景

前端开发多用已经存在的UI框架，例如element ui，vant，antd等，框架本身带有样式，所以开发过程中很多时候只需要进行小改动以统一系统本身样式并适配设计稿，碎片化样式可做到自由组合成想要的效果，不用再考虑起合适的class名，不用有稍微不同的div或文字就要起不同的class名再写样式，碎片化样式应用熟练之后可以提高开发效率，更适用于做项目，可自由选择是否应用。

二、代码

1.主样式表引用

@import './variable';
@import './base';

2.variable.scss

改用root变量模式，需要改主题色时用：
const style = document.documentElement.style
style.setProperty('--color-primary', '#6B3F17'); // 更改主题颜色

:root {
    --color-primary:#00C2C8;//主要颜色
    --color-primary-hover:#00C2C8;//主要颜色hover状态
    --color-primary-strong: #00C2C8;//更深的主要颜色
    --color-status-success: #3DCCA6;//成功色
    --color-status-warn: #F08430;//警告色
    --color-status-warn-level0:#ffefdf;//低级警告色
    --color-status-danger: #F95F5B;//危险色
   
  }
$font-size-s:13px; //小字号
$font-size-m:15px; //中等字号
$font-size-l:16px; //大字号
$font-size-ml:18px; //更大字号

$mini-dis:3px;//迷你间距
$small-dis:5px;//小间距
$default-dis:10px;//正常间距
$primary-dis:15px;//主要间距
$big-dis:20px;//大间距
$large-dis:25px;//更大间距

$color-primary: #00BFC8;//主要颜色
$color-primary-hover:#00BFC8;//主要颜色hover状态
$color-primary-strong: rgba(17,124,147,1);//更深的主要颜色
$color-bg: #f3f3f3;
$color-bg-primary: #E9FDFE;
$color-background-gray:#f5f5f5;

//灰色系level数字越大，颜色越深
$gray-level2: #ccc;
$gray-level1: #ddd;
$gray-level0: #f7f8fa;

$color-status-success: #3DCCA6;//成功色
$color-status-warn: #fe6a22;//警告色
$color-status-warn-level0:#986f0b;//低级警告色
$color-status-danger: #F95F5B;//危险色

3.base.scss

//基本样式-lt
/*
基础样式
用于配置工程所用颜色，字号，间距等基础信息
将样式粉碎化，可用多个单一class名拼凑样式，如<p class="text-big text-primary">主体颜色的标题</p>
遇到不能拼凑的样式请在index.scss中配置
此文件在开发过程中只可做增加维护，不可做修改维护
primary:主要颜色，主要字号，主要间距
default:正常样色，正常字号，正常间距
*/
// body, html {
//   height: 100%;
//   background: #fff;
//   font-size: 14px;
//   //overflow: hidden;
// }

body, ul, ol, dl, li, dd, dt, h1, h2, h3, h4, h5, h6, p, img, form, input,span {
  margin: 0;
  padding: 0;
  font-size: 14px;
}

li {
  list-style-type: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}

img {
  display: block;
  line-height: 0;
  max-width: 100%;
  max-height: 100%;
}

em {
  font-style: normal;
}

a,a:hover {
  color: inherit;
  -webkit-tap-highlight-color: rgba(90, 162, 220, 0.5);
  text-decoration: none;
  outline: none;
  border: none;
}
input:-internal-autofill-previewed, input:-internal-autofill-selected{
  -webkit-text-fill-color:inherit!important
}
//*{font-size: 12px}
textarea {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}

.inline-block {
  display: inline-block;
}

.mm{
  margin: $mini-dis;
  box-sizing: border-box;
}
.mlm{
  margin-left: $mini-dis;
  box-sizing: border-box;
}
.mrm{
  margin-right: $mini-dis;
  box-sizing: border-box;
}
.mtm{
  margin-top: $mini-dis;
  box-sizing: border-box;
}
.mbm{
  margin-bottom: $mini-dis;
  box-sizing: border-box;
}

.ms{
  margin: $small-dis;
  box-sizing: border-box;
}
.mls{
  margin-left: $small-dis;
  box-sizing: border-box;
}
.mrs{
  margin-right: $small-dis;
  box-sizing: border-box;
}
.mts{
  margin-top: $small-dis;
  box-sizing: border-box;
}
.mbs{
  margin-bottom: $small-dis;
  box-sizing: border-box;
}

.md{
  margin: $default-dis;
  box-sizing: border-box;
}
.mld{
  margin-left: $default-dis;
  box-sizing: border-box;
}
.mrd{
  margin-right: $default-dis;
  box-sizing: border-box;
}
.mtd{
  margin-top: $default-dis;
  box-sizing: border-box;
}
.mbd{
  margin-bottom: $default-dis;
  box-sizing: border-box;
}

.mp{
  margin: $primary-dis;
  box-sizing: border-box;
}
.mlp{
  margin-left: $primary-dis;
  box-sizing: border-box;
}
.mrp{
  margin-right: $primary-dis;
  box-sizing: border-box;
}
.mtp{
  margin-top: $primary-dis;
  box-sizing: border-box;
}
.mbp{
  margin-bottom: $primary-dis;
  box-sizing: border-box;
}

.mb{
  margin: $big-dis;
  box-sizing: border-box;
}
.mlb{
  margin-left: $big-dis;
  box-sizing: border-box;
}
.mrb{
  margin-right: $big-dis;
  box-sizing: border-box;
}
.mtb{
  margin-top: $big-dis;
  box-sizing: border-box;
}
.mbb{
  margin-bottom: $big-dis;
  box-sizing: border-box;
}

.ml{
  margin: $large-dis;
  box-sizing: border-box;
}
.mll{
  margin-left: $large-dis;
  box-sizing: border-box;
}
.mrl{
  margin-right: $large-dis;
  box-sizing: border-box;
}
.mtl{
  margin-top: $large-dis;
  box-sizing: border-box;
}
.mbl{
  margin-bottom: $large-dis;
  box-sizing: border-box;
}
.mt0{
  margin-top: 0;
}
.mb0{
  margin-bottom: 0;
}
.ml0{
  margin-left: 0;
}
.mr0{
  margin-right: 0;
}
.m0{
  margin: 0;
}

.pm{
  padding: $mini-dis;
  box-sizing: border-box;
}
.plm{
  padding-left: $mini-dis;
  box-sizing: border-box;
}
.prm{
  padding-right: $mini-dis;
  box-sizing: border-box;
}
.ptm{
  padding-top: $mini-dis;
  box-sizing: border-box;
}
.pbm{
  padding-bottom: $mini-dis;
  box-sizing: border-box;
}

.ps{
  padding: $small-dis;
  box-sizing: border-box;
}
.pls{
  padding-left: $small-dis;
  box-sizing: border-box;
}
.prs{
  padding-right: $small-dis;
  box-sizing: border-box;
}
.pts{
  padding-top: $small-dis;
  box-sizing: border-box;
}
.pbs{
  padding-bottom: $small-dis;
  box-sizing: border-box;
}

.pd{
  padding: $default-dis;
  box-sizing: border-box;
}
.pld{
  padding-left: $default-dis;
  box-sizing: border-box;
}
.prd{
  padding-right: $default-dis;
  box-sizing: border-box;
}
.ptd{
  padding-top: $default-dis;
  box-sizing: border-box;
}
.pbd{
  padding-bottom: $default-dis;
  box-sizing: border-box;
}

.pp{
  padding: $primary-dis;
  box-sizing: border-box;
}
.plp{
  padding-left: $primary-dis;
  box-sizing: border-box;
}
.prp{
  padding-right: $primary-dis;
  box-sizing: border-box;
}
.ptp{
  padding-top: $primary-dis;
  box-sizing: border-box;
}
.pbp{
  padding-bottom: $primary-dis;
  box-sizing: border-box;
}

.pb{
  padding: $big-dis;
  box-sizing: border-box;
}
.plb{
  padding-left: $big-dis;
  box-sizing: border-box;
}
.prb{
  padding-right: $big-dis;
  box-sizing: border-box;
}
.ptb{
  padding-top: $big-dis;
  box-sizing: border-box;
}
.pbb{
  padding-bottom: $big-dis;
  box-sizing: border-box;
}

.pl{
  padding: $large-dis;
  box-sizing: border-box;
}
.pll{
  padding-left: $large-dis;
  box-sizing: border-box;
}
.prl{
  padding-right: $large-dis;
  box-sizing: border-box;
}
.ptl{
  padding-top: $large-dis;
  box-sizing: border-box;
}
.pbl{
  padding-bottom: $large-dis;
  box-sizing: border-box;
}
.pt0{
  padding-top: 0;
}
.pl0{
  padding-left: 0;
}
.pr0{
  padding-right: 0;
}
.pb0{
  padding-bottom: 0;
}
.p0{
  padding: 0;
}

.fr {
  float: right;
}

.fl {
  float: left;
}

//边框
.border-all {
  border: 1px solid $gray-level1;
  box-sizing: border-box;
}

.border-t {
  border-top: 1px solid $gray-level1;
  box-sizing: border-box;
}

.border-b {
  border-bottom: 1px solid $gray-level1;
  box-sizing: border-box;
}

.border-l {
  border-left: 1px solid $gray-level1;
  box-sizing: border-box;
}

.border-r {
  border-right: 1px solid $gray-level1;
  box-sizing: border-box;
}
.border-primary{
  border-color: var(--color-primary);
}

.border-danger{
  border-color: var(--color-status-danger);
}

.border-warn{
  border-color: var(--color-status-warn);
}

.h100 {
  height: 100%;
  //overflow: auto;
}

//字体颜色对齐大小
.text-primary-strong {
  color:var(--color-primary-strong);
}

.text-primary {
  color: var(--color-primary);
}

.text-success {
  color: var(--color-status-success);
}

.text-warn {
  color: var(--color-status-warn);
}

.text-danger {
  color: var(--color-status-danger);
}

.text-bold {
  font-weight: bold;
}

.text-white {
  color: #fff
}

.text-gray {
  color: #666
}
.text-gray-9 {
  color: #999
}
.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}
.text-justify {  
  text-align: justify;  
}  

.text-small {
  font-size: $font-size-s;
  * {
    font-size: $font-size-s
  }
}
.text-dark{
  color:#333;
}
.text-default{
  font-size: $font-size-m;
  color:#333;
  * {
    font-size: $font-size-m;
    color:#333;
  }
}
.text-middle{
  font-size: $font-size-m;
}
.text-big{
  font-size: $font-size-l;
}
.text-large{
  font-size:$font-size-ml;
}
.text-more-large{
  font-size:20px;
}

.text-break{
  word-break: break-all
}

//块级元素背景状态
.box-primary {
  background: var(--color-primary);
}

.box-success {
  background: var(--color-status-success);
}

.box-warn {
  background: var(--color-status-warn);
}

.box-danger {
  background: var(--color-status-danger);
}

//页面背景色
.bg-default {
  background: $gray-level0;
}

.bg-primary {
  background: $color-bg-primary;
}

.bg-white {
  background: #fff!important;
}

.bg-warn{
  background: var(--color-status-warn-level0);
}

.bg-light{
  background: $color-bg-light;
}

//清除浮动
.clear {
  overflow: hidden;
}

//圆角
.radius-default{
  border-radius: 10px;
}
.radius-primary{
  border-radius: 15px;
}
.radius-small{
  border-radius: 5px;
}
.radius-mini{
  border-radius: 3px;
}

//垂直居中
.vertical-center {
  display: flex;
  align-items: center;
  //justify-content:center
}
//横向居中
.row-center{
  margin: 0 auto;
}
//隐藏
.hide {
  display: none;
}

//阴影
.shadow-default {
  box-shadow: 0 0 5px 0 $gray-level2;
}

//小手鼠标
.pointer {
  cursor: pointer;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

//行高1.5-1.8 可用class .line1-5,.line1-6,.line1-7,.line1-8
@for $i from 5 through 8{
  .line1-#{$i}{
    line-height: 1+($i * 0.1);
  }
}
//行高1-3 可用class .line1,.line2,.line3
@for $i from 1 through 3{
  .line#{$i}{
    line-height: $i;
  }
}

// 多行超出...支持2到5 可用class .rows-ellipsis2,.rows-ellipsis3,.rows-ellipsis4,.rows-ellipsis5
@for $i from 2 through 5{
  .rows-ellipsis#{$i}{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $i;
    overflow: hidden;
  }
}

//百分比宽度，支持10%到100%整十数 可用class .width1,.width2,.width3,.width4,.width5,.width6,.width7,.width8,.width9,.width10,
@for $i from 1 through 10{
  .width#{$i}{
    width: $i*10%;
  }
}
.width-full-80{
  width: 80vw;
}
@for $i from 1 through 10{
  .opacity#{$i}{
    opacity: $i*0.1;
  }
}

//单行超出...
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.not-allowed {
  cursor: not-allowed
}

//fade 动画

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}
.fade-leave-active {
  position: absolute;
  top: -1000px;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateY(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.fade-transform-leave-active{
  position: absolute;
  top: -1000px
}

.iconfont {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  position: relative;
}