使用 Less + 各种框架开发小程序快速切图布局常用的自定义 Less 函数【原创】

前言

开发小程序已有一段时间了,之前使用过 wepy、uni-app 框架来开发小程序,切图布局时对比过原始 cssscss / sassless 三种方式来写样式,最后发现使用 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(); // 文字超出显示 ...
  }
}

 

作者: 博主

Talk is cheap, show me the code!

发表评论

电子邮件地址不会被公开。

Captcha Code