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.

Now let’s look at Flex layouts. Flex layouts have become common style layouts, but using style directly requires too much code. We can also use them by encapsulating them into common classes.

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

Flex Basics

Start by creating the basic Flex style

.flex {
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex-nowrap {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.flex-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

// Line mode (spindles horizontal)
.flex-row {
    .flex(a); -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-lines: single;
}

// Column mode (spindles)
.flex-column {
    .flex(a); -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -webkit-box-orient: vertical;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-lines: single;
}

// reverse row mode (spindles horizontal)
.flex-row-reverse {
    .flex-row(a); -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-direction: reverse;
}

// reverse column mode (axis horizontal)
.flex-column-reverse {
    .flex-column(a); -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-direction: reverse;
}

// Auto-fill (with and with flex-basis to fill the remaining space)
.flex-auto {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-flex: 1;
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
}

Copy the code

We can now turn on flex mode layout via flex-row or flex-column

 <div class="flex-column">
        <div class="flex-row">
             <div>one</div>
           	 <div>two</div>
        </div>
        <div class="flex-row">
        	 <div>three</div>
           	 <div>four</div>
         </div>
 </div>
Copy the code

Flex Alignment Style

Let’s create flex aligned styles

// align-items
@align-items-keys: start, center, end, stretch;
@align-items-values: flex-start, center, flex-end, between, around;

.flex-align-items(@data.@i: 1) when(@i =< length(@data)) {
    @align: extract(@align-items-keys.@i);
    @value: extract(@align-items-values.@i);

    .align-items-@{align} {
        -webkit-align-items: @value;
        align-items: @value;
        -webkit-box-align: @align;
    }

    .flex-align-items(@data, (@i + 1));
}

// justify-content
@justify-content-keys: start, center, end, between, around;
@justify-content-values: flex-start, center, flex-end, space-between,
    space-around;

.flex-justify-content(@data.@i: 1) when(@i =< length(@data)) {
    @key: extract(@justify-content-keys.@i);
    @value: extract(@justify-content-values.@i);

    .justify-content-@{key} {
        -webkit-justify-content: @value;
        justify-content: @value;
    }

    .flex-justify-content(@data, (@i + 1));
}

// Iterate over context-content-keys to generate the style
.flex-justify-content(@justify-content-keys);

// iterate over the align-items-keys generation style
.flex-align-items(@align-items-keys);
Copy the code

You can see that we first define key and value with @align- kitems-keys and @align- kitems-values which are used to generate the corresponding class name and assign the corresponding style.

We then iterate through our keys with when to generate the corresponding style

.flex-justify-content(@data.@i: 1) when(@i =< length(@data)) {
    .flex-align-items(@data, (@i + 1));
}

.flex-justify-content(@justify-content-keys)
Copy the code

We use the extract method to extract the key and value we want to use using index

This completes the alignment style implementation for align-items and context-content

Implement Flex fixed scale size

Let’s implement Flex to assign size to a fixed scale, setting flex-basis to do this.

.flex-basis-loop(@n.@i:1) when (@i< =@n) {
    .flex-basis-@{i} {
        -webkit-flex-basis: percentage(@i / @n);
        -ms-flex-preferred-size: percentage(@i / @n);
        flex-basis: percentage(@i / @n);
    }
    .flex-basis-loop(@n, (@i + 1));
}

.flex-basis-loop(12)
Copy the code

I used flex-basis-loop to divide Flex into 12 pieces, corresponding to flex-basis-1 to flex-basis-12 styles

Use percentage to allocate the size by percentage

Implement Flex elastic scaling

Let’s move on to allocating flex size by elasticity, setting flex-span for our purposes.

.flex-span-loop(@n.@i:1) when (@i< =@n) {
    .flex-span-@{i} {
        -webkit-flex: @i @i auto;
        -ms-flex: @i @i auto;
        flex: @i @i auto;
        -webkit-box-flex: @i;
    }
    .flex-span-loop(@n, (@i + 1));
}

 .flex-span-loop(12)
Copy the code

So we’ve also implemented the size of the elasticity

We can also use flex-basis and Flex-Auto to automatically populate the remaining size.

 <div class="flex-column">// Height is 2/12<div class="flex-row flex-basis-2">
             <div>one</div>
           	 <div>two</div>
        </div>// The height is the remaining space<div class="flex-row flex-auto">
        	 <div class="flex-span-1">three</div>
           	 <div class="flex-span-2">four</div>
         </div>
 </div>
Copy the code

This will almost complete our usual Flex layout.

Github code portal: code