vue后台项目常用的公共样式LESS篇，省去80%写样式的时间

采用less开发

本篇项目里样式的预处理器选用的是less，跟sass差不多，css预处理器的强大与便捷不是本篇的主要内容就不多加吹捧了，还没用上的赶紧装上就对了。语法也不介绍了，不懂请自行找资料，上手快。

适用场景

本篇项目主要针对后台去写的公共样式，可以结合其他现成的ui框架用，本项目就采用了element-ui开发，但跟公共样式没半点耦合。移动端也可以借鉴思路去写一套属于自己项目的公共样式表。

公共样式的设计原则

根据职责单一原则，公共样式里写的东西都是那些信手拈来的样式，都是那些普通而又常用的东西，所以有以下的设计思路：

1. 样式名简单直白，易记易用
2. 样式的功能尽量单一，低耦合
3. 变量文件与具体class文件分离，其他页面可单独引入文件复用变量
4. 样式名采用烤串命名规则

具体实现

在静态目录文件夹里新建custom.less 与 common.less，cusotm.less就是用来存放变量的文件，由于我们的公共样式不可能包含所有样式的，在具体页面里涉及到一些公共变量，例如颜色值，统一边距值的时候，就单独引入custom.less，然后就可以使用里面的公共变量了

变量篇

custom.less
这里把公共的颜色和边距写到变量里，可根据项目情况自行扩展

/*** 公共颜色 ***/
@primary: #01C250; // 主题色
@blue: #4466AD; // 蓝色
@red: #F56C6C; // 红色
@orange: #E6A23C; // 橙色
@gray: #909399; // 灰色
@gray-light: #ececec; // 深灰色
@gray-light2: #fafafa; // 浅灰色
@dark: #000; // 深色/黑色
@disabled: #c0c4cc; // 禁用色
@text: #303133; // 文字颜色
@border: #E4E7ED; // 边框颜色
@bg-gray:#f6f6f6;    //灰色背景底色、页面背景

/*** 边距 ***/
@1x: 8px;
@x: @1x / 2; // 4px
@2x: 2 * @1x;
@3x: 3 * @1x;
@4x: 4 * @1x;

公共样式篇

common.less
首先是引入变量文件，再reset一下那些常见的浏览器默认样式。

@import "custom";

/*** reset默认 ***/
body, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, input, select, textarea, button, th, td, img {
  margin: 0;
  padding: 0;
}
body {
  font: 14px/1.6 "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  color: @text;
}
ul, ol, li {
  list-style: none;
}
a {
  text-decoration: none;
  color: @blue;
  &:hover {
    color: @primary;
  }
  //cursor: pointer;
}

颜色

定义项目里常用到的颜色，包括背景色

// 主题背景色
.bg-primary {
  background: @primary !important;
  color: white;
  font-weight: 400;
}
//table-header-背景色
.bg-gray {
  background: #f9f9f9 !important;
  font-weight: 400;
}
//白色背景
.bg-white {
  background: #fff !important;
}

// 文本颜色
.text {
  color: @text;
}
//主题色
.primary {
  color: @primary;
}
// 蓝色
.blue {
  color: @blue;
}
// 红色
.red {
  color: @red;
}
// 橙色
.orange {
  color: @orange;
}
// 灰色
.gray {
  color: @gray;
}
// 深色
.dark {
  color: @dark;
}
// 禁用色
.disabled {
  color: @disabled;
}
// 白色
.white {
  color: white;
}

字体

跟字体相关的主要是大小，粗细和换行方式

.font-l {
  font-size: 16px;
}
.font-n {
  font-size: 14px;
}
.font-s {
  font-size: 12px;
}
.bold {
  font-weight: bold;
}
.normal {
  font-weight: normal;
}

// 文字不换行- 显示1行 - 溢出显示...
.text-1 {
  display: -webkit-box;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
// 文字不换行- 显示2行 - 溢出显示...
.text-2 {
  display: -webkit-box;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

边距

接下来是边距，分4级，用1x，2x，3x，4x来标记，比较多，但一切是为了用着方便，用着顺手

/*** 外边距 ***/
.m-x {
  margin: @x;
}
.m-1x {
  margin: @1x;
}
.m-2x {
  margin: @2x;
}
.m-3x {
  margin: @3x;
}
.m-4x {
  margin: @4x;
}
.mv-x {
  margin-top: @x;
  margin-bottom: @x;
}
.mv-1x {
  margin-top: @1x;
  margin-bottom: @1x;
}
.mv-2x {
  margin-top: @2x;
  margin-bottom: @2x;
}
.mv-3x {
  margin-top: @3x;
  margin-bottom: @3x;
}
.mv-4x {
  margin-top: @4x;
  margin-bottom: @4x;
}
.mh-x {
  margin-left: @x;
  margin-right: @x;
}
.mh-1x {
  margin-left: @1x;
  margin-right: @1x;
}
.mh-2x {
  margin-left: @2x;
  margin-right: @2x;
}
.mh-3x {
  margin-left: @3x;
  margin-right: @3x;
}
.mh-4x {
  margin-left: @4x;
  margin-right: @4x;
}
.mt-x {
  margin-top: @x;
}
.mt-1x {
  margin-top: @1x;
}
.mt-2x {
  margin-top: @2x;
}
.mt-3x {
  margin-top: @3x;
}
.mt-4x {
  margin-top: @4x;
}
.mr-x {
  margin-right: @x;
}
.mr-1x {
  margin-right: @1x;
}
.mr-2x {
  margin-right: @2x;
}
.mr-3x {
  margin-right: @3x;
}
.mr-4x {
  margin-right: @4x;
}
.mb-x {
  margin-bottom: @x;
}
.mb-1x {
  margin-bottom: @1x;
}
.mb-2x {
  margin-bottom: @2x;
}
.mb-3x {
  margin-bottom: @3x;
}
.mb-4x {
  margin-bottom: @4x;
}
.ml-x {
  margin-left: @x;
}
.ml-1x {
  margin-left: @1x;
}
.ml-2x {
  margin-left: @2x;
}
.ml-3x {
  margin-left: @3x;
}
.ml-4x {
  margin-left: @4x;
}
.m-0 {
  margin: 0 !important;
}
.m-auto {
  margin: 0 auto !important;
}

/*** 内边距 ***/
.p-x {
  padding: @x;
}
.p-1x {
  padding: @1x;
}
.p-2x {
  padding: @2x;
}
.p-3x {
  padding: @3x;
}
.p-4x {
  padding: @4x;
}
.pv-x {
  padding-top: @x;
  padding-bottom: @x;
}
.pv-1x {
  padding-top: @1x;
  padding-bottom: @1x;
}
.pv-2x {
  padding-top: @2x;
  padding-bottom: @2x;
}
.pv-3x {
  padding-top: @3x;
  padding-bottom: @3x;
}
.pv-4x {
  padding-top: @4x;
  padding-bottom: @4x;
}
.ph-x {
  padding-left: @x;
  padding-right: @x;
}
.ph-1x {
  padding-left: @1x;
  padding-right: @1x;
}
.ph-2x {
  padding-left: @2x;
  padding-right: @2x;
}
.ph-3x {
  padding-left: @3x;
  padding-right: @3x;
}
.ph-4x {
  padding-left: @4x;
  padding-right: @4x;
}
.pt-x {
  padding-top: @x;
}
.pt-1x {
  padding-top: @1x;
}
.pt-2x {
  padding-top: @2x;
}
.pt-3x {
  padding-top: @3x;
}
.pt-4x {
  padding-top: @4x;
}
.pr-x {
  padding-right: @x;
}
.pr-1x {
  padding-right: @1x;
}
.pr-2x {
  padding-right: @2x;
}
.pr-3x {
  padding-right: @3x;
}
.pr-4x {
  padding-right: @4x;
}
.pb-x {
  padding-bottom: @x;
}
.pb-1x {
  padding-bottom: @1x;
}
.pb-2x {
  padding-bottom: @2x;
}
.pb-3x {
  padding-bottom: @3x;
}
.pb-4x {
  padding-bottom: @4x;
}
.pl-x {
  padding-left: @x;
}
.pl-1x {
  padding-left: @1x;
}
.pl-2x {
  padding-left: @2x;
}
.pl-3x {
  padding-left: @3x;
}
.pl-4x {
  padding-left: @4x;
}
.p-0 {
  padding: 0 !important;
}

边框

接下来是常见的边框

//边框
.bd {
  border: 1px solid @border;
  // 圆角
  &.round {
    border-radius: 8px;
  }
  // 虚线
  &.dashed {
    border-style: dashed;
  }
}
.bd-t {
  border-top: 1px solid @border;
  &.dashed {
    border-top-style: dashed;
  }
}
.bd-b {
  border-bottom: 1px solid @border;
  &.dashed {
    border-bottom-style: dashed;
  }
}
// 上下边框
.bd-v {
  border-top: 1px solid @border;
  border-bottom: 1px solid @border;
  &.dashed {
    border-top-style: dashed;
    border-bottom-style: dashed;
  }
}
.bd-l {
  border-left: 1px solid @border;
  &.dashed {
    border-left-style: dashed;
  }
}
.bd-r {
  border-right: 1px solid @border;
  &.dashed {
    border-right-style: dashed;
  }
}
//主题色边框
.bd-primary {
  border-color: @primary !important;
}

布局定位

//相对定位
.relative {
  position: relative;
}
//绝对定位
.absolute{
  position: absolute;	
}
//粘性定位
.sticky {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 400;
}
//水平垂直居中定位(父元素要是定位元素)
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
//行内块
.ib {
  display: inline-block;
}
//行内元素对齐
.text-c {
  text-align: center;
}
.text-l {
  text-align: left;
}
.text-r {
  text-align: right;
}

弹性布局

//纵向布局
.flex-col {
  flex-direction: column;
}
//横向翻转布局
.flex-row-r {
  flex-direction: row-reverse;
}
/*两边对齐弹性布局*/
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/*间隔相等弹性布局*/
.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
/*水平居中*/
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
/*弹性布局从头排*/
.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
/*弹性布局从尾排*/
.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/*弹性布局项目缩放*/
.flex-grow {
  flex-grow: 1;
}
.flex-shrink {
  flex-shrink: 0;
}
/*弹性布局换行*/
.flex-wrap {
  flex-wrap: wrap;
}
/*弹性布局文字不换行，溢出显示...*/
.flex-1 {
  flex: 1;
  overflow: hidden;
}
//项目顶部对齐
.align-start {
  align-self: flex-start;
}
//项目尾部对齐
.align-end {
  align-self: flex-end;
}

其他补充

//鼠标手指
.pointer {
  cursor: pointer;
  &:hover {
    color: @primary;
  }
}
//阴影
.shadow {
  box-shadow: 1px 1px 6px 0 rgba(0, 0, 0, 0.2);
}
//填充、响应式
.res {
  width: 100%;
}

以上就是常用的公共样式，实际用法就不用多说了。

结语：刚用一时爽，一直用一直爽

class命名容易记是重点，要达想起就知道命名的便捷。既然引入了公共样式，那我们在写代码时就有一个原则：能用公共样式的地方就不要自己写css了，一是快，二是方便维护。当你多用几次就会发现，开发效率一下子提升上去了，可以省去80%写常用样式的时间，省下来的时间去优化下代码吧。