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的外掛程式。

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的詳細內容。更多資訊請關注PHP中文網其他相關文章！