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

Less

In the production process of front-end page, if there are many elements in the page, and the hierarchical structure is more complex, it will lead to the special redundancy of CSS written by us, and it is not easy to maintain.

So there are a lot of extensions to CSS, such as Less,Sass and other CSS preprocessors.

In general, these CSS extension languages are downloaded using NPM and then configured for use in WebPack.

It is possible to import less directly into the browser, but the clean-CSS plug-in will be introduced first.

But if you want the fastest way to style with less, the way I’ve found is to use plug-ins in VS Code that let VS Code compile a CSS for you directly. This way is also my current more commonly used.

Easy Less

A plugin called Easy Less is recommended.

Easy Less works immediately after installation in VS Code’s extension store. Now you can create a Less file, write style code in Less, and save it to see that a CSS file with the same name will be generated in the same folder as Less.

Contents of the Less file:

@setColor:{
    1: #ff0000;
    2: #ff0;
    3: #f0f;
    4: #0ff;
    5: #00f;
}
#app {
    .ul {
        each(@setColor, {
            .li@{key} {
                background-color: @value;
                width: 100px;
                height: 20px; }}}})Copy the code

Generated CSS code:

#app .ul .li1 {
  background-color: #ff0000;
  width: 100px;
  height: 20px;
}
#app .ul .li2 {
  background-color: #ff0;
  width: 100px;
  height: 20px;
}
#app .ul .li3 {
  background-color: #f0f;
  width: 100px;
  height: 20px;
}
#app .ul .li4 {
  background-color: #0ff;
  width: 100px;
  height: 20px;
}
#app .ul .li5 {
  background-color: #00f;
  width: 100px;
  height: 20px;
}
Copy the code

This way, when you import a page, you can import the CSS file directly without having to do any extra conversion work. In fact, in VS Code, there are not only less simplified tools, sass tool plug-ins also exist, if you are interested in it, you can also try.