前言
开发小程序已有一段时间了，之前使用过 wepy、uni-app 框架来开发小程序，切图布局时对比过原始 css、scss / sass 和 less 三种方式来写样式，最后发现使用 less 来写样式是最省心的，高效的定义好 less 样式函数，可以让你写起代码来事半功倍，比起其他方式，高效地使用 less ，代码量甚至可以少一倍左右，另外还有个好处，就是可以让你写样式时尽可能少写或者不写 rpx 这个烦人的单位。
小程序快速切图布局常用 Less 函数
下面是自己定义好的 fn.less 函数文件，项目中大家可按需增删改。可以通过 @import './fn.less'; 导入自己的样式中使用，详见下面使用方式。
// 宽高顶左
.whtl (@w, @h, @t, @l) {
width: unit(@w, rpx);
height: unit(@h, rpx);
top: unit(@t, rpx);
left: unit(@l, rpx);
}
// 宽高顶右
.whtr (@w, @h, @t, @r) {
width: unit(@w, rpx);
height: unit(@h, rpx);
top: unit(@t, rpx);
right: unit(@r, rpx);
}
// 宽高底左
.whbl (@w, @h, @b, @l) {
width: unit(@w, rpx);
height: unit(@h, rpx);
bottom: unit(@b, rpx);
left: unit(@l, rpx);
}
// 宽高底右
.whbr (@w, @h, @b, @r) {
width: unit(@w, rpx);
height: unit(@h, rpx);
bottom: unit(@b, rpx);
right: unit(@r, rpx);
}
// 宽高
.wh(@w, @h) {
width: unit(@w, rpx);
height: unit(@h, rpx);
}
// 高
.h (@h) {
height: unit(@h, rpx);
}
// 宽
.w (@w) {
width: unit(@w, rpx);
}
// 顶
.t (@t) {
top: unit(@t, rpx);
}
// 左
.l (@l) {
left: unit(@l, rpx);
}
// 右
.r (@r) {
right: unit(@r, rpx);
}
// 底
.b (@b) {
bottom: unit(@b, rpx);
}
// 行高
.lh (@lh) {
line-height: unit(@lh, rpx);
}
// padding-left
.pl (@pl) {
padding-left: unit(@pl, rpx);
}
// padding-right
.pr (@pr) {
padding-right: unit(@pr, rpx);
}
// padding-top
.pt (@pt) {
padding-top: unit(@pt, rpx);
}
// padding-bottom
.pb (@pb) {
padding-bottom: unit(@pb, rpx);
}
// padding 1 参数
.p1 (@p) {
padding: unit(@p, rpx);
}
// padding 2 参数
.p2 (@tb, @lr) {
padding: unit(@tb, rpx) unit(@lr, rpx);
}
// padding 3 参数
.p3 (@t, @lr, @b) {
padding: unit(@t, rpx) unit(@lr, rpx) unit(@b, rpx);
}
// padding 4 参数
.p4 (@t, @r, @b, @l) {
padding: unit(@t, rpx) unit(@r, rpx) unit(@b, rpx) unit(@l, rpx);
}
// margin-top
.mt (@mt) {
margin-top: unit(@mt, rpx);
}
// margin-bottom
.mb (@mb) {
margin-bottom: unit(@mb, rpx);
}
// margin-left
.ml (@ml) {
margin-left: unit(@ml, rpx);
}
// margin-right
.mr (@mr) {
margin-right: unit(@mr, rpx);
}
// margin 1 参数
.m1 (@m) {
margin: unit(@m, rpx);
}
// margin 2 参数
.m2 (@tb, @lr) {
margin: unit(@tb, rpx) unit(@lr, rpx);
}
// margin 3 参数
.m3 (@t, @lr, @b) {
margin: unit(@t, rpx) unit(@lr, rpx) unit(@b, rpx);
}
// margin 4 参数
.m4 (@t, @r, @b, @l) {
margin: unit(@t, rpx) unit(@r, rpx) unit(@b, rpx) unit(@l, rpx);
}
// font-size
.fs(@fs) {
font-size: unit(@fs, rpx);
}
// border-radius
.br(@br) {
border-radius: unit(@br, rpx);
}
// text-align: center
.tc() {
text-align: center;
}
// font-weight: bold
.fwb() {
font-weight: 700;
}
// letter-spacing
.ls(@val) {
letter-spacing: unit(@val, rpx);
}
// 各种 position
.posr() {
position: relative;
}
.posa() {
position: absolute;
}
.posf() {
position: fixed;
}
// 单行文字超出显示 ...
.els () {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// background-size
.bs(@w, @h) {
background-size: unit(@w, rpx) unit(@h, rpx);
}
// text-shadow 文字描边 @f 边大小，@c 颜色
.textshadow(@f, @c) {
text-shadow: unit(@f, rpx) unit(@f, rpx) unit(@f, rpx) @c, unit(@f * -1, rpx) unit(@f * -1, rpx) unit(@f, rpx) @c, unit(@f, rpx) 0 unit(@f, rpx) @c, 0 unit(@f, rpx) unit(@f, rpx) @c, 0 unit(@f * -1, rpx) unit(@f, rpx) @c, unit(@f * -1, rpx) 0 unit(@f, rpx) @c;
}使用方式
@import './fn.less';
.parent {
.wh(400, 200); // width, height
margin: 0 auto;
.posr(); // position: relative
&__block {
.posa(); // position: absolute
.whtl(400, 200, 0, 0); // width, height, top, left
}
&__text {
display:block;
.posa(); // position: absolute
.whbr(120, 60, 20, 40); // width, height, bottom, right
color: #fff;
.tc(); // text-align: center
.fs(28); // font-size
.lh(60); // line-height
.els(); // 文字超出显示 ...
}
}
