小編給大家分享一下VSCode中怎么省略配置來快速使用Less，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供河?xùn)|網(wǎng)站建設(shè)、河?xùn)|做網(wǎng)站、河?xùn)|網(wǎng)站設(shè)計、河?xùn)|網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、河?xùn)|企業(yè)網(wǎng)站模板建站服務(wù)，十余年河?xùn)|做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

Less

前端頁面的制作過程中，如果頁面內(nèi)元素較多，并且層級結(jié)構(gòu)較為復(fù)雜，會導(dǎo)致我們寫出來的CSS特別的冗余，并且不容易進(jìn)行維護(hù)。

所以對于CSS也有不少的擴(kuò)展，比如Less,Sass等CSS預(yù)處理器。

一般而言，在使用這些CSS擴(kuò)展語言時，會先使用npm進(jìn)行下載，然后在webpack當(dāng)中進(jìn)行配置使用。

雖然也可以直接導(dǎo)入less到瀏覽器中，不過要先引入clean-css 插件。

但是如果想要以最快的方式使用less進(jìn)行樣式編寫，我找到的方法是使用vs code中的插件，讓vs code直接幫你編譯完成一個css。這種方式也是我目前比較常用的。

Easy Less

這里推薦一款叫做Easy Less的插件。

Easy Less直接在vs code的擴(kuò)展商店中安裝后即可生效，現(xiàn)在我們可以創(chuàng)建一個less文件，然后在里面使用less的方式編寫樣式代碼，保存后即可發(fā)現(xiàn)在less同級文件夾中會生成一個相同名稱的css文件。

Less文件中內(nèi)容：

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

生成的CSS代碼：

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

這樣在引入頁面時，就可以直接引入此CSS文件，而不必做多余的轉(zhuǎn)換工作了。 其實(shí)在vs code當(dāng)中，不止有less的簡化工具，sass的工具插件同樣也存在其中，大家如果感興趣也都可以試試。

以上是“VSCode中怎么省略配置來快速使用Less”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！