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

作者介紹：Runsen目前大三下學(xué)期，專(zhuān)業(yè)化學(xué)工程與工藝，大學(xué)沉迷日語(yǔ)，Python， Java和一系列數(shù)據(jù)分析軟件。導(dǎo)致翹課嚴(yán)重，專(zhuān)業(yè)排名中下。.在大學(xué)60%的時(shí)間，都在CSDN。

本文接著上面Bootstrap，本想進(jìn)入ajax的，但是發(fā)現(xiàn)LESS好像忘記了。

文章目錄

• Less
• 變量使用
• 編譯less

Less

Less是CSS的預(yù)編譯語(yǔ)言，可以讓編寫(xiě)CSS的過(guò)程更加簡(jiǎn)單、高效、快捷，讓一沉不變的CSS充滿(mǎn)活力和生機(jī)。有的時(shí)候，多次出現(xiàn)的相同屬性，這樣代碼很多，就需要重整。

這樣 Less預(yù)處理CSS就拉了，比如經(jīng)常出現(xiàn)下面的CSS代碼

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

變量使用

整個(gè)項(xiàng)目中可能會(huì)出現(xiàn)N個(gè)相同的color，維護(hù)起來(lái)非常麻煩。Less使用“變量”解決了這個(gè)問(wèn)題！

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

還能使用一些簡(jiǎn)單的運(yùn)算符，讓任何數(shù)字，甚至顏色都可以進(jìn)行運(yùn)算，這些和JavaScript一樣的。

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

編譯less

less 的編譯指的是將寫(xiě)好的 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，即可編譯成功。或者，如果輸入 lessc xxx.less > ..\xx.css，表示輸出到指定路徑。

除了LESS，還有比如Sass都是一回事，先水一篇。畢竟這個(gè)LESS沒(méi)必要深入研究，因?yàn)楹竺鎣ue會(huì)完成的。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。