VSCode中怎么省略配置來快速使用Less

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

Less

前端頁面的制作過程中，如果頁面內元素較多，并且層級結構較為復雜，會導致我們寫出來的CSS特別的冗余，并且不容易進行維護。

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

一般而言，在使用這些CSS擴展語言時，會先使用npm進行下載，然后在webpack當中進行配置使用。

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

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

Easy Less

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

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

Less文件中內容：

@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文件，而不必做多余的轉換工作了。 其實在vs code當中，不止有less的簡化工具，sass的工具插件同樣也存在其中，大家如果感興趣也都可以試試。

以上是“VSCode中怎么省略配置來快速使用Less”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！