Home > Development Tools > VSCode > How to omit configuration in VSCode to quickly use Less

How to omit configuration in VSCode to quickly use Less

青灯夜游
Release: 2021-10-18 19:25:47
forward
1648 people have browsed it

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

How to omit configuration in VSCode to quickly use Less

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.

How to omit configuration in VSCode to quickly use 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.

How to omit configuration in VSCode to quickly use Less

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;
            }
        })
    }
}
Copy after login

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 after login

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!

Related labels:
source:juejin.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template