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

前言

开发小程序已有一段时间了，之前使用过 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(); // 文字超出显示 ...

}

}

阅读:

1,365

作者： 博主

Talk is cheap, show me the code!查看博主的所有文章