We often use style libraries to facilitate the use and reuse of CSS styles to facilitate UI development. But we can also create our own front-end style library Less, as their own ammunition for the convenience of later project development.

Let’s create an Arsenal of styles for everyday project development.

Use Less to build your Arsenal of front-end styles. – (1) Basic Style section

Use Less to build your Arsenal of front-end styles. – (2)Flex layout

The font size

By creating a font size style we can quickly set the font size, we can use a custom font size according to their needs.

@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)
Copy the code

We use @min-font size and @max-font size to specify the maximum and minimum font to be generated. We can convert the corresponding index to the unit value of PX by 1px * @i, and then use less to iterate to generate the font size we need.

Font size-{number} can be used directly to set the font size

<div class="Font-size: 14px" Copy the code

Common font size Settings

In addition to setting custom font sizes, we generally need to set common font sizes to keep our font sizes consistent in many places.

@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);
Copy the code

By setting @font-size-keys and @font-size-value, we specify the commonly used font sizes of small,default and large, traverse @font-size-keys through less, and fetch the corresponding @font-size-valu The e value sets the font size for the corresponding type.

So we can directly use the font size – {small | normal | large} to set the font size

<div class= font-size-default>Slay dragons, middle age</div>
<div class="Font-size: 16px" > Copy the code

Font thickness Settings

We can continue to set the font thickness according to the above method.

// #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);
Copy the code

Similar to the previous method, we get the font – weight – {number} and the font weight – {lighter | bold | bolder} opening set font size.

<div class=
       
 
       
font-weight-lighter>Slew a dragon, lighter</div>
Copy the code

Layout Settings (Margin&Padding)

For ease of use we can design a layout style rule that we are used to, such as

{margin|padding}-{direction}-{size}
Copy the code
  • First we indicate whether to use margin or padding
  • The second one we indicate is the direction in which Margin or Padding is used
  • The third bit is the size we want to set

Ok, so we can use a uniform representation of common Margin or Padding. To brief our p Padding on the style of writing, the Margin m writing, direction we use l, r, t, b, x, y, a, respectively, to represent the 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
Copy the code

With the rules set, we’ll use less to implement our style library

@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);
Copy the code

By setting @min-padding-value and @max-padding-value we set the size range to be supported..@padding-direction is the direction we support, where a is implemented in the outer loop so it is not placed in the padding-direction-lo The op.

Padding-direction-loop (padding-direction-loop) creates a padding-direction-loop (padding-direction-loop) that creates a style for each size (paddin) The G-direction-loop is responsible for generating styles in each direction.

We can also set some common values to keep styles consistent across our pages

@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);
Copy the code

We used a similar approach, but instead of setting the size range, we used small, default, and large to set the three default sizes so that we could use a uniform size layout on the page.

.p-x-small
.p-a-large
.p-r-default
Copy the code

We add a similar operation to margin to implement the style rules we designed earlier.

@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)) {
    @direction: 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
Copy the code

Ok, so now we have a basic style library that we can quickly develop in our projects. Using Sass is similar to the implementation logic, just follow the corresponding functions.

Github code portal: code