@Author：Runsen
@Date：2020/5/31

作者介紹：Runsen目前大三下學期，專業化學工程與工藝，大學沉迷日語，Python， Java和一系列數據分析軟件。導致翹課嚴重，專業排名中下。.在大學60%的時間，都在CSDN。

本文接著上面Bootstrap，本想進入ajax的，但是發現LESS好像忘記了。

文章目錄

• Less
• 變量使用
• 編譯less

Less

Less是CSS的預編譯語言，可以讓編寫CSS的過程更加簡單、高效、快捷，讓一沉不變的CSS充滿活力和生機。有的時候，多次出現的相同屬性，這樣代碼很多，就需要重整。

這樣 Less預處理CSS就拉了，比如經常出現下面的CSS代碼

#test1 {color: #fff; }#test2 {color: #fff; }

變量使用

整個項目中可能會出現N個相同的color，維護起來非常麻煩。Less使用“變量”解決了這個問題！

@white: #fff; // 使用@定義一個變量#test1 {color: @white; // 引用變量 }#test2 {color: @white; // 引用變量 }

還能使用一些簡單的運算符，讓任何數字，甚至顏色都可以進行運算，這些和JavaScript一樣的。

@length: 5px + 5; // 這樣變量就被賦值為 10px @doubleLength: @length * 2; // 變量 * 2 @addLength: @length + @doubleLength; // 變量之間相加 #test {color: #888 / 4; // 顏色運算height: (@length + 5) * 2; // 使用括號進行優先級運算border: (@length + 1) solid red; // 使用在多參數屬性中 }

編譯less

less 的編譯指的是將寫好的 less 文件 生成為 css 文件。先去W3C的LESS教程偷窺一下。

下面就是安裝less，需要安裝node先，具體的看W3C。

C:\Users\YIUYE>npm install -g less D:\nodejs\node_global\lessc -> D:\nodejs\node_global\node_modules\less\bin\lessc + less@3.11.1 added 60 packages from 123 contributors in 33.704s╭────────────────────────────────────────────────────────────────╮│ ││ New minor version of npm available! 6.4.1 -> 6.14.5 ││ Changelog: https://github.com/npm/cli/releases/tag/v6.14.5 ││ Run npm install -g npm to update! ││ │╰────────────────────────────────────────────────────────────────╯C:\Users\YIUYE>lessc lessc: no input files usage: lessc [option option=parameter ...] <source> [destination]

在 less 所在的路徑下，輸入 lessc xxx.less，即可編譯成功?；蛘?#xff0c;如果輸入 lessc xxx.less > ..\xx.css，表示輸出到指定路徑。

除了LESS，還有比如Sass都是一回事，先水一篇。畢竟這個LESS沒必要深入研究，因為后面vue會完成的。

總結

以上是生活随笔為你收集整理的二十、预处理CSS的LESS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。