Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Less

Less (short for Leaner Style Sheets) is a backward-compatible CSS extension language that extends the CSS language by adding features such as variables, mixins, and functions to make CSS easier to maintain and extend. The CSS preprocessor adds programming features to the CSS, regardless of browser compatibility.

The CSS preprocessor languages are Sass, Less, and Stylus.

• Sass: The earliest and most mature CSS preprocessor
• Less: simple and compatible CSS
• Stylus: Less popular than Sass and Less in a broad sense

Why preprocess CSS

CSS’s low reusability, redundant code writing is actually a headache. If you don’t have a lot of CSS style code to write, that’s fine, but if you do, it can be onerous, and writing modular development requires a lot of repetitive selectors.

The syntax is not powerful enough, and it is not very friendly for later management and maintenance, and you may have to dig through a pile of code to find the place you want to maintain.

The absence of variables and a reasonable style reuse mechanism makes it difficult to maintain logically related attribute values that must be repeatedly printed as literals

---

Learn Less quickly

The installation

For the installation of LESS in the project, you can use package management tools such as NPM to install it, or you can use it in other ways.

I have previously recommended using VS Code’s plug-in Easy Less for this purpose. See the article “VS Code Uses Less Quickly, Without configuration.” You can also refer to the official installation method: lesscss.cn/#using-less…

Less will not be described here

---

Variables 🐪

Common attribute value definition

For the convenience of developers, there are variable properties in less, somewhat similar to CSS custom properties (–*), see developer.mozilla.org/zh-CN/docs/…

The variable definition of less is written as @ + the variable name

Example:

@width: 50%;
@height: @width * 1.5;
@color: #c7d63e;
#app {
    width: @width;
    height: @height;
    background-color: @color;
}
Copy the code

Attribute name and class name

Variables can also be reused, of course, variables can be set not only the value of the property, but also the property name and class name, so use @{variable name}.

@m: margin; // Attribute name:margin
@p: padding; // Attribute name:padding
@mp: marpad; @{mp} {@{m}:40px; @ {p} :10px 20px 30px 40px;
}
Copy the code

The margin and padding properties of the marpad are set as follows:

.marpad {
  margin: 40px;
  padding: 10px 20px 30px 40px;
}
Copy the code

Note: class names are rarely set by variable because

1. inlessThere are methods like nested scopes, and class names don’t need to be defined too much
2. The definition of class names is also usually very straightforward, and can be understood as easily as variables by hump, etc.

As for attribute names and so on, it depends on the individual. If you want to write less, you can use abbreviations such as M instead of margin

Variable delay loading

Variable lazy loading of less can also be called variable promotion, I think.

There is the concept of variable promotion and function promotion in JavaScript, there is variable scope in JavaScript, and there is scope in less. Variable delay in LESS is more similar to function promotion.

Js example: You can write down which two values the code will output

function a11() {
    console.log(5);
}
a11();
function a11() {
    console.log(3);
}

function k() {
    a11();
    function a11(){
        console.log(7);
    } 
}
k();
Copy the code

This is going to print 3 and 7. On method execution, methods in the same scope are looked up first, and function promotion pushes the function declaration to the front (function expressions are not promoted), so external a11() executes output 3 instead of 5. A11 inside k takes precedence over methods in the same scope, producing 7.

Take a look at the equivalent in less:

@a11: 5px;
.a {
    width: @a11;
}
@a11: 3px;

.k {
    .b {
        width: @a11;
    }
    @a11: 7px;
}
Copy the code

Converted CSS: here @11 in the same scope is raised before use, so the. A will be 3px. The peer scope takes precedence, 7px in.b

.a {
  width: 3px;
}
.k .b {
  width: 7px;
}
Copy the code

---

Mixins 🐫

This is a way to blend a set of attributes from one rule set into another.

For example

In development, it is common to encounter text that is too long. In this case, we can set the text beyond to ellipsis. The following statement is used:

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
Copy the code

But when the project is big enough, there are a lot of cases where the text is too long, and if you write these three sentences every time, it will be a pain (this is true for lazy people).

Ordinary hybrid

So the mixin feature in less is very convenient, you can directly define a class beyond the hidden, in the need to pass the element. The name of the class. Can also apply predefined class attributes to that element. This is a simple mix of uses.

OverflowText; overflowText; overflowText;

@width: 100px;
@height: 30px;
@color: #c7d63e;
/* Text beyond hiding */
.overflowText {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
#app {
    width: @width;
    height: @height;
    color: @color;
    .overflowText(a); }Copy the code

Converted CSS code:

With mixed refs

Mixed definitions can also be used like JavaScript functions, taking parameters. Class name (parameter 1, parameter 2…) ;

.funA(@w, @h, @color) {
    width: @w;
    height: @h;
    color: @color;
}
.p1 {
    .funA(10px.20px.#f00);
}
.p2 {
    .funA(30px.200px.#ff0);
}
Copy the code

Converted CSS:

.p1 {
  width: 10px;
  height: 20px;
  color: #f00;
}
.p2 {
  width: 30px;
  height: 200px;
  color: #ff0;
}
Copy the code

This works for elements that are mostly the same in style, but have a few differences

Parameter mixing with default values

Given the parameter mixing mentioned above, can we set a default value if no parameter is passed? The answer, of course, is yes

Modify the previous CSS code slightly:

.funA(@w, @h, @color: #0f0) {
    width: @w;
    height: @h;
    color: @color;
}
.p1 {
    .funA(10px.20px);
}
Copy the code

In general, the default parameter is best placed last, and the parameter after the default parameter must also use the default parameter.

Named hybrid

JavaScript calls to function pass parameters as incidentally, but in less with parameters mixed can specify the name

Such as:

.funA(@w, @h, @color: #0f0) {
    width: @w;
    height: @h;
    color: @color;
}
.p1 {
    .funA(@h:20px, @w: 100px);
}
Copy the code

The resulting CSS is still 100px wide and 20px high

---

Nesting 🐘

CSS styles are meant to trim the HTML skeleton and make the page flesh and blood.

But HTML elements are hierarchically nested, so it’s best to write CSS that can be nested to match the HTML hierarchy. The ability to use nesting in place of or in combination with nesting in less.

This feature actually works pretty well, even better than the previous variable in my opinion. Of course, because it’s used so often, it’s often overlooked.

html

<div class="main">
        <div class="left">
            <div class="leftTop"></div>
        </div>
        <div class="right">
            <div class="rightTop"></div>
        </div>
    </div>
Copy the code

less

.main {
    .left{
        .leftTop {
            width: 10px; }}.right {
        .rightTop {
            width: 10px; }}}Copy the code

---

Annotation 🐼

Once you’ve written code, a good way to maintain it is to write comments

In less, comments written with // are not generated in transformed CSS, only comments written with /**/ appear in CSS