VSCode中如何省略配置來快速使用Less

本篇文章給大家介紹一下vscode中省略配置的使用less的方法,希望對大家有所幫助!

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的插件。

VSCode中如何省略配置來快速使用Less

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

VSCode中如何省略配置來快速使用Less

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
喜歡就支持一下吧
點贊8 分享