theme: condensed-night-purple
highlight: default

1. 概要

这篇文章主要记录自己在工作中，使用less方式，不对less能力做展开讨论，只是介绍常用的一些功能。如有疑问请查阅官方链接 less中文官网通过此篇文章的阅读，希望能在你微调或搭建或多人协作开发样式中提高开发效率、减少团队样式表冗余、增强样式表的统一管理和维护。文章通过定义 class 规则，预设多种样式（如果设计稿给力其实全局的样式并不多比如字体颜色，可能也就几种就够用了）在布局中通过联想样式的属性值规则直接添加类名即可。

2. 实际应用

2.1 less 模块目录

每一个目录的 index.less 文件为该目录模块的入口文件，如果想引入相关 less 模块，直接导入模块目录下 index.less 文件即可。将 index.less 作为统一入口有助于模块管理，使代码结构更加清晰。

./
|-- base 基础样式目录
|   |-- background.less 背景样式
|   |-- borderRaduis.less 边角样式
|   |-- box.less 盒模型
|   |-- center.less 居中
|   |-- color.less 字体颜色
|   |-- display.less 显示方式
|   |-- float.less 浮动
|   |-- fontSize.less 字体大小
|   |-- fontWeight.less 字体 weight
|   |-- img.less 常用图片大小样式
|   |-- index.less base 目录的入口文件
|   |-- margin.less 外边距
|   |-- padding.less 内边距
|   |-- position.less 定位
|   |-- textAlign.less 文字居中
|   `-- width.less 元素宽度
|-- common 公共样式目录
|   `-- index.less 公共样式入口文件
|-- custom 自定义样式目录
|   `-- index.less 自定义样式入口文件
|-- func 自定义函数模块
|   `-- index.less 自定义函数模块入口
|-- vars 自定义变量目录
|   `-- index.less 自定义变量模块入口文件
`-- index.less 整个 less 目录的入口模块

2.2 样式规则

所有的样式书写基本按照样式的属性值的首写字母拼接而成。如样式E{ display: none }则使用 less 定义为 .f-dn: { display: none } 如此只要在需要的 dom 元素上加上f-dn 的类名即可，其中f表示函数，并用 “-” 与样式属性值首写字母拼接。如下图所示：

2.2 less 样式内容

按照目录结构顺序分别对各个样式表的内容以及相关内容的必要说明。

2.2.1 base/background.less

/* @蓝天 背景模块 */
.f-bg-white{
    background: #ffffff;
}
/* -fc 为颜色属性值的前两位 */
.f-bg-fc{ 
    background: #FC5F3A;
}

2.2.3 base/borderRaduis.less

使用了 less 中的 each 循环遍历。rang(start, end, step )，start: 表示起始值， end: 表示结束值，step: 表示步长。其中的 value 表示 each 中的每次遍历的值。详细用法请查看 less中文官网。

/** @蓝天 圆角模块 */
each( range( 4, 10, 2 ), {
  .f-br@{value}{
    border-radius: ~'@{value}px';
  }
});

编译后的结果:

/** @蓝天 圆角模块 */
.f-br4 {
  border-radius: 4px;
}
.f-br6 {
  border-radius: 6px;
}
.f-br8 {
  border-radius: 8px;
}
.f-br10 {
  border-radius: 10px;
}
.f-br {
  border-radius: 100%;
}

2.2.4 base/box.less

@import './../func/index';

/** @蓝天 盒模型 */
.f-bsbb{
  .f-bs(border-box); /* .f-bs 是 func 模块中的函数 */
}
.f-bscs{
  .f-bs(content-box);
}

编译后：

/** @蓝天 盒模型 */
.f-bsbb {
  box-sizing: border-box;
}
.f-bscs {
  box-sizing: content-box;
}

2.2.5 base/center.less

由于居中实现的方式较多，也较为复杂，主要使用了 flex，position，margin 这三种居中方式。在相关的 dom 类中添加 class 即可。

@import './../func/index';

/** @蓝天 居中 主要针对 block */

/* flex 水平垂直 居中  h: horizontal， v: vertical c: center */
.f-fhv{
  .f-flex()
}

/******** flex 水平对齐方式 *******/
.f-hsb{ /* h: horizontal, sb:space-between */
  .f-display(flex);
  justify-content: space-between;
}
.f-hsa{ /* h: horizontal, sa: space-around */
  .f-display(flex);
  justify-content: space-around;
}
.f-hc{ /* h: horizontal, c: center */
  .f-display(flex);
  justify-content: center;
}

/******** flex 垂直对齐方式 注意主轴方向 ********/
.f-vsb{ /* v: vertical, sb:space-between */
  .f-display(flex);
  flex-direction: column;
  justify-content: space-between;
}
.f-vsa{ /* v: vertical, sa: space-around */
  .f-display(flex);
  flex-direction: column;
  justify-content: space-around;
}
.f-vc{ /* v: vertical, c: center */
  .f-display(flex);
  align-items: center;
}

/****** 使用定位 盒子中居中， 父盒子需要 定位 ******/
.f-phv{ /* p: position, h: horizontal, v: vertical */
    .f-pos(absolute);
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
}

/* margin 居中 */
.f-hmc{ /* h: horizontal, m: margin, c: center */
  margin: 0 auto;
}
.f-mc{ /* m: margin, c: center */
  margin: auto;
}

2.2.6 base/color.less

@import './../func/index.less';
/* 
    @蓝天 字体颜色, 颜色后缀基本为前两个灰度值， 并不准确， 以实际色为准 
    cl: 表示 color, 后面的数值，表示色值
*/
.f-cl0{
  .f-color(#000000)
}
.f-cl2{
  .f-color(#222222)
}
.f-cl3{
  .f-color(#333333)
}
.f-cl4{
  .f-color(#444444)
}
.f-cl6{
  .f-color(#666666)
}
.f-cl7{
  .f-color(#777777)
}
.f-cl8{
  .f-color(#888888)
}
.f-cl9{
  .f-color(#999999)
}
.f-clwhite{
  .f-color(#ffffff)
}
.f-cl3a{
  .f-color(#3A3A3A)
}
.f-cl85{
  .f-color(#858585)
}

2.2.7 base/display.less

@import './../func/index';

/** @蓝天 布局 */

/* display: flex */
.f-df{
    .f-display( flex );
}
.f-dif{
    .f-display(inline-flex);
}
.f-dib{
    .f-display(inline-block);
}
.f-db {
    .f-display(block);
}
.f-dn {
    .f-display(none);
}
.f-dt {
    .f-display(table);
}

2.2.8 base/float.less

@import './../func/index';
/* @蓝天 浮动 */
.f-fl{
  .f-float( left );
}
.f-fr{
  .f-float( right );
}
.f-fn{
  .f-float( none );
}

2.2.9 base/fontSize.less

在这里使用 each 与 range 语法，详细请查看 less中文官网。

@import './../func/index';
/* @蓝天 字体大小 */
each( range( 16, 50, 2 ), {
    .f-fz@{value}{
        .f-fz( @value );
    }
})

2.2.10 base/fontWeight.less

@import './../func/index';
/* @蓝天 字体粗细 */
each( range( 4, 6, 1 ), {
    .f-fw@{value}{
        .f-fontWeight(@value * 100 );
    }
});

2.2.11 base/img.less

/** @蓝天 图片宽度 */
.img( @w ){
  width: ~'@{w}px';
  height: ~'@{w}px';
}
each( range( 30, 100, 10 ), {
  .f-img@{value}{
    .img(@value);
  }
});

2.2.12 base/index.less

base 目录的入口文件，将当前目录下的所有的文件导入到 base/index.less 文件。

/* @蓝天 基础样式表 入口文件*/
@import './../func/index.less';
@import './fontSize.less';
@import './position.less';
@import './textAlign.less';
@import './center.less';
@import './margin.less';
@import './padding.less';
@import './width.less';
@import './color.less';
@import './box.less';
@import './float.less';
@import './borderRaduis.less';
@import './img.less';
@import './fontWeight.less';
@import './background.less';

2.2.13 base/margin.less

@import './../func/index';
/* @蓝天 外边距 */

/* margin-right */
each( range( 2, 50, 2 ), {
  .f-mr@{value} {
    .f-mr(@value);
  }
});

/* margin-left */
each( range( 2, 50, 2 ), {
  .f-ml@{value} {
    .f-ml(@value);
  }
});
each( range( 90, 120, 10 ), {
  .f-ml@{value} {
    .f-ml(@value);
  }
});

/* margin-top */
each( range( 4, 50, 2 ), {
  .f-mt@{value} {
    .f-mt(@value);
  }
});
each( range( 90, 120, 10 ), {
  .f-mt@{value} {
    .f-mt(@value);
  }
});

/* margin-bottom */
each( range( 10, 50, 2 ), {
  .f-mb@{value} {
    .f-mb(@value);
  }
});

/* margin-left margin-right */
each( range( 4, 20, 2 ), {
  .f-mlr@{value} {
    .f-mlr(@value);
  }
});

/* margin-top margin-bottom */
each( range( 10, 50, 10 ), {
  .f-mtb@{value} {
    .f-mtb(@value);
  }
});

2.2.14 base/padding.less

@import "./../func/index";

/* @蓝天 内边距 */
/* padding-top */
each( range( 6, 50, 2 ), {
  .f-pt@{value} {
    .f-pt(@value);
  }
});

/* padding-bottom */
each( range( 6, 50, 2 ), {
  .f-pl@{value} {
    .f-pl(@value);
  }
});
each( range( 10, 70, 10 ), {
  .f-pb@{value} {
    .f-pb(@value);
  }
});

/* padding-right */
each( range( 10, 20, 2 ), {
  .f-pr@{value} {
    .f-pr(@value);
  }
});

/* padding-left padding-right */
each( range( 6, 50, 2 ), {
  .f-plr@{value} {
    .f-plr(@value);
  }
});

/* padding */
each( range( 10, 50, 10 ), {
  .f-p@{value} {
    .f-padding(@value, padding);
  }
});

/* padding-top padding-bottom */
each( range( 10, 50, 10), {
  .f-ptb@{value} {
    .f-pt(@value);
    .f-pb(@value);
  }
});

2.2.15 base/position.less

@import './../func/index';
/* @蓝天 定位 */
// position: relative
.f-pr{
    .f-pos(relative)
}
.f-pa{
    .f-pos(absolute)
}
.f-pf{
    .f-pos(fixed)
}
.f-ps{
    .f-pos(static)
}

2.2.16 base/textAlign.less

@import './../func/index';

/* @蓝天 居中( 针对 行内元素 ) */
/* text-align: center */
.f-tac{
  .f-ta(center)
}
.f-tar{
  .f-ta(right)
}
.f-tal{
  .f-ta(left)
}
.f-taj{
  .f-ta(justify)
}

2.2.17 base/width.less

@import './../func/index';

/* @蓝天 width 仅适用 百分比*/
.f-w100{
  .f-w( 100, ~'%' );
}
.f-w80{
  .f-w( 80, ~'%' );
}

2.2.18 common/index.less

/* @蓝天 公共样式模块 */
@import './../func/index';

/* 超出出现省略号 */
.f-el{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-clamp2{
  .f-clamp(2);
}
.f-clamp1{
  .f-clamp(1);
}

/* 清除浮动 */
.f-clearfix{
  .f-display();
  zoom: 1;
  &:after {
    content: " ";
    .f-display();
    .f-fz(0);
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

/* 小红点 */
.f-red-dot{
  .f-pos(relative);
  &:after{
    content: '';
    @h: 12px;
    .f-pos(absolute);
    display: block;
    width: @h;
    height: @h;
    border-radius: 50%;
    background: #FF4849;
    top: 50%;
    transform: translateY( -50% );
    right: 36px;
  }
}


.f-arrow{
  &::after{
    .f-display();
    width: 0;
    height: 0;
    content: ' ';
    color: transparent; 
    border-style: solid;
    border-width: 18px 14px;
    border-color: #E3E3E3 transparent transparent;
    margin-left: 20px;
    transform: translateY( 10px );
  }
}

::-webkit-scrollbar {
  width: 6px;
  height: 7px;
  cursor: pointer !important;
}
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba( 0, 0, 0, .3 );
  background: rgba( 0, 0, 0, .3 );
}
::-webkit-scrollbar-track {
  border-radius: 0;
  background: #fff;
}

2.2.19 func/index.less

/* @蓝天 常用 less 函数 和 less 变量 */

/****************** 盒模型 ******************/
.f-bs( @val:border-box ){
    box-sizing: @val;
}

/****************** 布局 ******************/
.f-display( @var: block ){
    display: @var;
}

/****************** 定位 ******************/
.f-pos( @var: relative ){
    position: @var;
}

/****************** 字体大小 ******************/
.f-fz( @val ){
    font-size: ~'@{val}px';
}

/****************** 外边距 ******************/
.f-margin( @val, @key:margin ){
    @{key}: @val;
}
.f-ml( @val, @unit: px ){
    margin-left: ~'@{val}@{unit}';
}
.f-mr( @val, @unit: px ){
    margin-right: ~'@{val}@{unit}';
}
.f-mt( @val, @unit: px ){
    margin-top: ~'@{val}@{unit}';
}
.f-mb( @val, @unit: px ){
    margin-bottom: ~'@{val}@{unit}';
}
.f-mtb( @val, @unit: px ){
    .f-mt( @val, @unit: px );
    .f-mb( @val, @unit: px )
}
.f-mlr( @val, @unit: px ){
    .f-ml( @val, @unit: px );
    .f-mr( @val, @unit: px )
}
.f-m( @val, @unit: px ){
    margin: ~'@{val}@{unit}';
}

/****************** 内边距 ******************/
.f-padding( @val, @key:padding,  @unit: px){
    @{key}: ~'@{val}@{unit}';
}
.f-pl( @val, @unit: px ){
    padding-left: ~'@{val}@{unit}';
}
.f-pr( @val, @unit: px ){
    padding-right: ~'@{val}@{unit}';
}
.f-pt( @val, @unit: px ){
    padding-top: ~'@{val}@{unit}';
}
.f-pb( @val, @unit: px ){
    padding-bottom: ~'@{val}@{unit}';
}
.f-ptb( @val, @unit: px ){
    padding-top: '@{val}@{unit}';
    padding-bottom: '@{val}@{unit}';
}
.f-plr( @val, @unit: px ){
    padding-left: ~'@{val}@{unit}';
    padding-right: ~'@{val}@{unit}';
}

/****************** 宽高 ******************/
.f-w( @val, @unit: 'px' ){
    width: ~'@{val}@{unit}';
}
.f-h( @val, @unit: 'px' ){
    height: ~'@{val}@{unit}';
}

/****************** 颜色 ******************/
.f-color( @val ){
    color: @val;
}

/****************** 文字居中 ******************/
.f-ta(@val:center){
    text-align: @val;
}

/****************** 浮动 *********************/
.f-float( @val ){
    float: @val;
}

/****************** 背景色 *********************/
.f-bgc( @val ){
    background-color: @val;
}

/****************** 水平线条 ******************/
.f-hline(@px: 1px, @color:#E5E5E5){
  .f-pos();
  &::after{
    .f-pos(absolute);
    width: 100%;
    left: 0;
    bottom: 0;
    background: @color;
    height: @px;
    content: '';
    display: block;
  }
}

/****************** flex 相关参数 ******************/
.f-flex( @h:center, @v:center, @dir: row ){
    display: flex;
    justify-content: @h;
    align-items: @v;
    flex-direction: @dir;
}

/****************** 多行省略号 ******************/
.f-clamp( @count: 2 ){
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal !important;
    -webkit-line-clamp: @count;/*  行数*/
}

/****************** 文字加粗 ******************/
.f-fontWeight( @bold: none ){
    font-weight: @bold;
}

2.2.20 vars/index.less

/** 
  @蓝天 全局变量，定义页面皮肤，风格等相关配置，逐步完善中 
*/

@color-blue: #3768F4; // 蓝色

@color-blue-gray: #242E59; // 蓝灰色

2.2.21 index.less

/* @蓝天 基础 样式 函数 */
@import './func/index.less';
@import './base/index.less';
@import './common/index.less';

/* 关闭按钮样式 */
.f-close{
  color: #F56C6C;
  cursor: pointer;
  .f-pa;
  right: 0;
  top: 0;
}

3. 实战

通过以下例子我们可以快速的布局，需要什么样的样式联想以下样式的属性值的自定义规则然后便可以快速的添加相关的样式的 class。这样大大解决了，我们在开发中需要微调，书写大量的重复性的样式属性值，而且需要定义样式名称，然后定义样式属性值，显然没有这种全局定义好规则，联想样式的 class 书写快速便捷，减少大量了代码冗余。缺点是需要记忆自定义规则，会写大量的类名，类名有时会冗余，这时需要开发者灵活使用。

<!-- 字体大小 30px 颜色#333 文本居中 超出出现省略号  -->
<p class="f-fz30 f-cl3 f-tac f-el">字体大小 30px 颜色#333 文本居中 超出出现省略号</p>

<!-- 盒子水平两端对齐切垂直居中 -->
<div class="f-hsb f-vc">
    <div>盒子水平两端对齐切垂直居中</div>
    <div>盒子水平两端对齐切垂直居中</div>
    <div>盒子水平两端对齐切垂直居中</div>
</div>

<!-- 外边距40， 内边距30 盒模型  -->
<div class="f-m40 f-p30 f-bsbb">外边距40， 内边距30 盒模型</div>

文章版权归作者所有，未经允许请勿转载。

THE END