?

直接在瀏覽器端使用

?

---

?

第一步，引入 .less 文件（注意要將 rel 屬性設(shè)置為“stylesheet/less”）

<link rel="stylesheet/less" type="text/css" href="styles.less" />

第二步，引入Less.js文件

<script src="less.js" type="text/javascript"></script>

（這里的js文件可以去官網(wǎng)下載）

?

需要特別注意的是：

1）.less 樣式文件一定要在 Less.js之前引入，這樣才能保證 .less 文件被正確編譯。

2）由于瀏覽器端使用Less時(shí)，是使用 ajax 來拉取 .less 文件，如果直接在本機(jī)文件系統(tǒng)打開（即地址是file://開頭）或者是有跨域的情況下，會(huì)拉取不到 .less 文件，導(dǎo)致樣式無法生效。因此，必須在http(s)協(xié)議下使用，即必須在服務(wù)器環(huán)境下使用。

3）還有一種情況容易導(dǎo)致樣式無法生效，就是部分服務(wù)器（以IIS居多）會(huì)對(duì)未知后綴的文件返回404，導(dǎo)致無法正常讀取 .less文件。解決方案是，在服務(wù)器中為 .less 文件配置MIME值為 text/css。一種更簡(jiǎn)單的方法，就是直接將 .less 文件改名為 .css 文件即可。

在開發(fā)階段，在頁面中嵌入一個(gè) Less.js 將Less在線編譯成CSS樣式，確實(shí)很方便。但是，在線編譯會(huì)產(chǎn)生加載延遲，即便在瀏覽器中有不足一秒的加載延遲，也會(huì)降低性能。如果Javascrip執(zhí)行錯(cuò)誤，還會(huì)引起美觀問題。因此，在生產(chǎn)環(huán)境中，并不推薦這種方式，而是推薦在服務(wù)器端使用Less。

我在直接使用瀏覽器引用的時(shí)候，出現(xiàn)了第二種情況的錯(cuò)誤，一直沒找到解決方案。

再考慮到實(shí)際運(yùn)用性，故采用在服務(wù)器端使用的方式。

?

在服務(wù)器端Node.JS中使用

---

?1. 安裝Less編譯器

為了方便使用 Lessc 這個(gè)全局命令，建議采用全局安裝。安裝命令如下：

$ npm install Less -g

如果想安裝指定版本，也非常方便，只需在安裝包后添加 @VERSION即可。如，安裝1.6.2版本的命令如下：

$ npm install Less@1.6.2 -g

當(dāng)然，如果你想安裝最新版本，可以嘗試以下命令：

$ npm install Less@latest -g

2. 編譯less文件并輸出標(biāo)準(zhǔn)格式的css文件

$ lessc styles.less styles.css

注：要輸出最小化的CSS可以使用clean-css插件。當(dāng)插件安裝時(shí)，用-clean css選項(xiàng)指定一個(gè)縮小的css輸出:

$ lessc --clean-css styles.less styles.min.css

?

代碼中用法

---

?

只要安裝了 Less，就可以在Node中像這樣調(diào)用編譯器：

var Less = require('Less'); Less.render('.class { width: 1 + 1 }', function (e, css) {console.log(css); });

經(jīng)過編譯生成的 CSS 代碼為：

.class {width: 2; }

你也可以手動(dòng)調(diào)用解析器和編譯器：

var parser = new(Less.Parser); parser.parse('.class { width: 1 + 1 }', function (err, tree) {if (err) { return console.error(err) }console.log(tree.toCSS()); });

?

轉(zhuǎn)載于:https://www.cnblogs.com/amcy/p/9784705.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的笔记：less的三种使用方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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