共计 1757 个字符，预计需要花费 5 分钟才能阅读完成。
本文主要是记录自己日常工作中用到过的一些 less 小技巧
1. 组件库主题定制
一般组件库的样式编写都会为使用者设计一些主题样式更换方案，我这里根据自己对主流组件库 antd 和 iview 的研究，总结出这两类：
iview 引入主题样式，复写
@import ‘~iview/src/styles/index.less’;
// Here are the variables to cover, such as:
@primary-color: #1B88EE;
antd 通过 less-loader 的 modifyVars 注入主题变量
rules: [{
test: /\.less$/,
use: [{
loader: ‘style-loader’,
}, {
loader: ‘css-loader’, // translates CSS into CommonJS
}, {
loader: ‘less-loader’, // compiles Less to CSS
options: {
modifyVars: {
‘primary-color’: ‘#1B88EE’,
},
javascriptEnabled: true,
},
}], // 注意 less-loader 的处理范围不要过滤掉 node_modules 下的 antd 包。
所以在给公司定制组件库的时候我们可以使用这两种方法来给使用者定制主题，当然了，我们设计的时候最好和主流框架的变量名保持一致，使得使用者更好上手。
@primary-color: #1B88EE; // 全局主色
@link-color: #1B88EE; // 链接色
@success-color: #4FC7AF; // 成功色
@warning-color: #F8AC59; // 警告色
@error-color: #F95355; // 错误色
@font-size-base: 14px; // 主字号
@text-color: rgba(0, 0, 0, .65); // 主文本色
@text-color-secondary : rgba(0, 0, 0, .45); // 次文本色
@disabled-color : rgba(0, 0, 0, .25); // 失效色
@border-radius-base: 4px; // 组件 / 浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, .15); // 浮层阴影
2. 给项目设置常用样式 common.less
不知道大家在实际开发中有没有遇到过为了一个 padding 或 margin 或 fontsize 而常常需要多写一层 class 的情况。
.loop(20);
.loop(@n, @i: 0) when (@i =< @n) {
@size: @i*2;
.pt-@{size} {padding-top: unit(@size, px) !important; }
.pr-@{size} {padding-right: unit(@size, px) !important; }
.pb-@{size} {padding-bottom: unit(@size, px) !important; }
.pl-@{size} {padding-left: unit(@size, px) !important; }
.mt-@{size} {margin-top: unit(@size, px) !important; }
.mr-@{size} {margin-right: unit(@size, px) !important; }
.mb-@{size} {margin-bottom: unit(@size, px) !important; }
.ml-@{size} {margin-left: unit(@size, px) !important; }
.fs-@{size} {font-size: unit(@size, px) !important; }
.loop(@n, (@i + 1));
} // e.g. pt-2 pt-16 pt-40 fs-16 fs-24 等等
把以上这段加到通用 less 里后，如果有一些特殊的边距或字体就可以直接写 class=”mb-20″ 这样了，可以省去一些功夫多写个不必要的 class，当然常用的 width 或 height 之类的都可以通过 when 循环解决，需要注意的 less 没有 if-else 判断，所有的判断也都是通过 when 关键字来解决。
