How to omit configuration in VSCode to quickly use Less

This article will introduce to you how to use Less without configuration in VSCode. I hope it will be helpful to everyone!

Less

During the production process of the front-end page, if there are many elements in the page and the hierarchical structure is complex, it will cause The CSS we wrote is particularly redundant and not easy to maintain. [Recommended learning: "vscode tutorial"]

So there are many extensions to CSS, such as Less,SassetcCSS preprocessor.

Generally speaking, when using these CSS extension languages, you will first use npm to download them, and then configure them in webpack.

Although you can also import less directly into the browser, you must first introduce the clean-css plug-in.

But if you want the fastest way to style using less, the way I found is to use the plugin in vs code and let vs code directly helps you compile a css. This method is also what I commonly use now.

Easy Less

Here we recommend a plug-in called Easy Less.

Easy LessIt will take effect after being installed directly in the extension store of vs code. Now we can create a less file and then use less in it Write the style code in the following way. After saving, you will find that a css file with the same name will be generated in the less folder at the same level.

Contents in 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;
            }
        })
    }
}

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;
}

In this way, when introducing the page, you can directly introduce this CSS files without having to do extra conversion work. In fact, in vs code, there are not only less simplified tools, but also sass tool plug-ins. If you are interested, you can try it.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of How to omit configuration in VSCode to quickly use Less. For more information, please follow other related articles on the PHP Chinese website!