少年啊,使用Less来打造你前端样式的武器库吧! - (1)基础样式篇

我们很多时候会使用一些样式库来快捷实现css样式的使用以及重用, 以此来方便我们开发UI. 但是我们也可以Less来打造自己的前端样式库,作为自己的弹药库方便之后的项目开发.

下面我们一起来创建一个用于日常项目开发的样式弹药库吧!

少年啊,来使用Less来打造你前端样式的武器库吧! - (1)基础样式篇

少年啊,来使用Less来打造你前端样式的武器库吧! - (2)Flex布局篇

字体大小

通过创建字体大小的样式可以方便我们快捷设置字体大小,我们可以按照自己的需要使用自定义的字体大小.

@min-font-size: 10;
@max-font-size: 80;

.font-size-loop(@n, @i:@min-font-size) when (@i <= @n) {
    .font-size-@{i} {
        font-size: 1px * @i;
    }
    .font-size-loop(@n, (@i + 1));
}

.font-size-loop(@max-font-size)

我们使用@min-font-size和@max-font-size来指定需要生成的最大字体和最小字体,可以通过 1px * @i将对应的index转换为px的单位值,然后通过less来遍历生成我们需要的字体大小样式即可.

这样我们就可以直接使用font-size-{number}来设置字体大小了

<div class="font-size-14>屠龙吧,少年</div>

常用字体大小设置

除了设置自定义字体大小,我们一般需要设置常用字体大小,来保持我们在很多地方的字体大小的一致性.

@size: small, default, large;
@font-size-value: 10px, 14px, 18px;

.font-size-iterate(@data, @i: 1) when(@i =< length(@data)) {
    @item: extract(@data, @i);
    @value: extract(@font-size-value, @i);

    .font-size-@{item} {
        font-size: @value;
    }
    .font-size-iterate(@data, (@i + 1));
}

.font-size-iterate(@size);

通过设置了@font-size-keys和@font-size-value我们指定了常用的small,default,large三种类型的字体大小,通过less遍历@font-size-keys,然后取出对应的@font-size-value的值即可设置对应类型的字体大小.

这样我们就可以直接使用font-size-{small | normal | large}来设置字体大小了

<div class="font-size-small>屠龙吧,少年</div>
<div class="font-size-default>屠龙吧,中年</div>
<div class="font-size-large>屠龙吧,老年</div>

字体粗细设置

我们按照上面的方法可以继续设置字体的粗细.

// #region font-weight-loop
@min-font-weight: 100;
@max-font-weight: 700;

.font-weight-loop(@n, @i: @min-font-weight) when(@i =< @n) {
    .font-weight-@{i} {
        font-weight: @i;
    }
    .font-weight-loop(@n,@i + 100);
}
.font-weight-loop(@max-font-weight);
// #endregion

@weight:  lighter bold bolder;

.font-weight(@data, @i: 1) when(@i =< length(@data)) {
    @item: extract(@data, @i);

    .font-weight-@{item} {
        font-weight: @item;
    }
    .font-weight(@data, (@i + 1));
}
.font-weight(@weight);

类似之前的方法,我们就得到了font-weight-{number}和font-weight-{ lighter | bold | bolder }开设置字体的粗细.

<div class="font-weight-400>屠龙吧,400</div>
<div class="font-weight-lighter>屠龙吧,lighter</div>

布局设置(Margin&Padding)

为了方便使用我们可以设计一个我们习惯的布局样式规则,比如

{margin|padding}-{direction}-{size}

• 第一位我们表示是使用margin还是padding
• 第二位我们表示是具体使用Margin或Padding的方向
• 第三位我们表示是需要设置的大小

好了,这样我们就可以把常见的Margin或Padding使用统一的方式表示.为了简短我们在样式中把Padding写作p,把Margin写作m,方向我们使用l,r,t,b,x,y,a分别来代表left,right,top,bottom,horizontal,vertical,all.

// m - margin | p - padding
// l - left | r - right | t - top | b -bottom | x - horizontal | y - vertical | a - all

.m-l-10		 // margin-left-10px
.m-y-10		// margin-vertical-10px
.p-x-10		// margin-horizontal-10px
.p-a-10		// margin-all-10px

设置好了规则,下来我们就使用less来实现我们的样式库

@padding-direction: t, b, l, r, x, y;
@min-padding-value: 1;
@max-padding-value: 80;

.padding-direction-loop(@data,  @value, @i: 1) when(@i =< length(@data)) {
    @direction: extract(@data, @i);

    .p-@{direction}-@{value} when (@direction = l) {
        padding-left: @value * 1px;
    }

    .p-@{direction}-@{value} when (@direction = r) {
        padding-right: @value * 1px;
    }

    .p-@{direction}-@{value} when (@direction = t) {
        padding-top: @value * 1px;
    }

    .p-@{direction}-@{item} when (@direction = b) {
        padding-bottom: @value * 1px;
    }

    .p-@{direction}-@{item} when (@direction = x) {
        padding: 0 @value * 1px;
    }

    .p-@{direction}-@{item} when (@direction = y) {
        padding: @value * 1px 0;
    }

    .padding-direction-loop(@data, @value, (@i + 1));
}

.padding-loop(@n, @i: @min-padding-value) when(@i =< @n ) {
    .p-a-@{i} {
        padding: 1px * @i;
    }

    .padding-direction-loop(@padding-direction, @i);
    .padding-loop(@n, (@i + 1));
}

.padding-loop(@max-padding-value);

通过设置@min-padding-value和@max-padding-value我们设定了具体支持的大小范围.@padding-direction是我们支持的方向,其中a在外侧循环实现了所以没有放在padding-direction-loop中.

通过padding-direction-loop来生成对应方向的样式,需要注意的是.padding-loop循环嵌套着.padding-direction-loop的循环,其中.padding-loop负责生成每个大小的样式,而padding-direction-loop负责生成了每个方向的样式.

我们也可以设置一些常用值来保持我们页面中样式的统一性

@size: small, default, large;
@padding-direction: t, b, l, r, x, y;
@padding-value:5px 10px 15px;

.padding-direction-iterate(@data, @item, @value, @i: 1)
    when(@i =< length(@data)) {
    @direction: extract(@data, @i);

    .p-@{direction}-@{item} {
        padding-@{direction}: @value;
    }

    .p-@{direction}-@{item} when (@direction = l) {
        padding-left: @value;
    }

    .p-@{direction}-@{item} when (@direction = r) {
        padding-right: @value;
    }

    .p-@{direction}-@{item} when (@direction = t) {
        padding-top: @value;
    }

    .p-@{direction}-@{item} when (@direction = b) {
        padding-bottom: @value;
    }

    .p-@{direction}-@{item} when (@direction = x) {
        padding: 0 @value;
    }

    .p-@{direction}-@{item} when (@direction = y) {
        padding: @value 0;
    }

    .padding-direction-iterate(@data,  @item, @value, (@i + 1));
}

.padding-iterate(@data, @i: 1) when(@i =< length(@data)) {
    @item: extract(@data, @i);
    @value: extract(@padding-value, @i);

    .p-a-@{item} {
        padding: @value;
    }

    .padding-direction-iterate(@padding-direction, @item, @value);
    .padding-iterate(@data, (@i + 1));
}

.padding-iterate(@size);

我们使用了上面类似的方法,不过我们没有设置大小的范围,而是使用small, default, large来设置了三组默认只尺寸,这样我们在页面中可以使用到统一大小的布局样式.

.p-x-small
.p-a-large
.p-r-default

我们对margin也进行添加类似的操作,就可以实现我们之前设计的样式规则.

@size: small, default, large;
@margin-direction: t, b, l, r, x, y;
@margin-value:5px 10px 15px;

.margin-direction-iterate(@data, @item, @value, @i: 1)
    when(@i =< length(@data)) {
    @direction: extract(@data, @i);

    .m-@{direction}-@{item} {
        margin-@{direction}: @value;
    }

    .m-@{direction}-@{item} when (@direction = l) {
        margin-left: @value;
    }

    .m-@{direction}-@{item} when (@direction = r) {
        margin-right: @value;
    }

    .m-@{direction}-@{item} when (@direction = t) {
        margin-top: @value;
    }

    .m-@{direction}-@{item} when (@direction = b) {
        margin-bottom: @value;
    }

    .m-@{direction}-@{item} when (@direction = x) {
        margin: 0 @value;
    }

    .m-@{direction}-@{item} when (@direction = y) {
        margin: @value 0;
    }

    .margin-direction-iterate(@data,  @item, @value, (@i + 1));
}

.margin-iterate(@data, @i: 1) when(@i =< length(@data)) {
    @item: extract(@data, @i);
    @value: extract(@margin-value, @i);

    .m-a-@{item} {
        margin: @value;
    }

    .margin-direction-iterate(@margin-direction, @item, @value);
    .margin-iterate(@data, (@i + 1));
}

.margin-iterate(@size);

// #endregion;


@margin-direction: t, b, l, r, x, y;
@min-margin-value: 1;
@max-margin-value: 80;

.margin-direction-loop(@data,  @value, @i: 1) when(@i =< length(@data)) {
    @margin: extract(@data, @i);

    .m-@{direction}-@{value} when (@direction = l) {
        margin-left: @value * 1px;
    }

    .m-@{direction}-@{value} when (@direction = r) {
        margin-right: @value * 1px;
    }

    .m-@{direction}-@{value} when (@direction = t) {
        margin-top: @value * 1px;
    }

    .m-@{direction}-@{item} when (@direction = b) {
        margin-bottom: @value * 1px;
    }

    .m-@{direction}-@{item} when (@direction = x) {
        margin: 0 @value * 1px;
    }

    .m-@{direction}-@{item} when (@direction = y) {
        margin: @value * 1px 0;
    }

    .margin-direction-loop(@data, @value, (@i + 1));
}

.margin-loop(@n, @i: @min-margin-value) when(@i =< @n ) {
    .m-a-@{i} {
        margin: 1px * @i;
    }

    .margin-direction-loop(@margin-direction, @i);
    .margin-loop(@n, (@i + 1));
}

.margin-loop(@max-margin-value);
// #endregion

好了,这样我们就拥有了一套基础的样式库,方便我们在项目中快速开发,使用Sass也是类似的实现逻辑,只需要按对应的函数进行实现就好.