本篇文章給大家介紹一下vscode中省略配置的使用less的方法，希望對大家有所幫助！
Less
前端頁面的制作過程中，如果頁面內元素較多，并且層級結構較為復雜，會導致我們寫出來的CSS特別的冗余，并且不容易進行維護。【推薦學習：《vscode》】
所以對于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！！
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
