瀏覽器端如何使用Less,需要的朋友可以參考下

1、瀏覽器端如何使用less,需要的朋友可以參考下之前項(xiàng)目用過(guò)less，現(xiàn)在負(fù)責(zé)的項(xiàng)目也要用法，所以就總結(jié)下less，也便利以后查看。本文主要是講掃瞄器端如何用法less。簡(jiǎn)介：less是一種由alexis sellier設(shè)計(jì)的動(dòng)態(tài)層疊樣式表語(yǔ)言。less 是開(kāi)源的，其第一個(gè)版本由ruby寫(xiě)成，但在后續(xù)的版本當(dāng)中，ruby逐漸被替換為javascript。受益于javascript，less可以在客戶(hù)端上運(yùn)行（ie6+、webkit、firefox），也可以在服務(wù)端運(yùn)行（node.js、rhino）。 本質(zhì)上，less 包含一套自定義的語(yǔ)法及一個(gè)解析器，用戶(hù)按照這些語(yǔ)法定義自己的樣式規(guī)章，這些規(guī)章

2、終于會(huì)通過(guò)解析器，編譯生成對(duì)應(yīng)的 css 文件。less 并沒(méi)有裁剪 css 原有的特性，更不是用來(lái)取代 css 的，而是在現(xiàn)有 css 語(yǔ)法的基礎(chǔ)上，為 css 加入程序式語(yǔ)言的特性。你也可以再less文件中寫(xiě)根據(jù)css規(guī)章寫(xiě)樣式。 意義： 轉(zhuǎn)變傳統(tǒng)樣式的編寫(xiě)方式，以面對(duì)對(duì)象的方式編寫(xiě)，提高開(kāi)發(fā)效率。 引入less：首先，引入rel屬性的值是stylesheet/less的.less樣式表。如下： 復(fù)制代碼代碼如下: 在渲染html頁(yè)面時(shí)，less文件需要編譯成css文件。我們可以有無(wú)數(shù)種辦法。在服務(wù)器端，如node.js，我們有特地的less編譯模塊。假如是在客戶(hù)端，需要從less官網(wǎng)下載

3、less.js文件，然后在html頁(yè)面中引入，如下： 復(fù)制代碼代碼如下: 有了less編譯工具，我們就可以渲染頁(yè)面了。在掃瞄器中用法less.js開(kāi)發(fā)是很好的，但不推舉用于生產(chǎn)環(huán)境中。掃瞄器端用法是在用法less開(kāi)發(fā)時(shí)最直觀的一種方式。假如是在生產(chǎn)環(huán)境中，尤其是對(duì)性能要求比較高的場(chǎng)合，建議用法node或者其它第三方工具先編譯成css再上線(xiàn)用法。注重：確保包容.less樣式表在less.js腳本之前當(dāng)你引入多個(gè).less樣式表時(shí)，它們都是自立編譯的。所以，在每個(gè)文件中定義的變量、混合、命名空間都不會(huì)被其它的文件分享。必需通過(guò)服務(wù)器環(huán)境拜訪(fǎng)頁(yè)面，否則報(bào)錯(cuò)掃瞄器選項(xiàng)：你可以引入之前通過(guò)創(chuàng)建一個(gè)全局l

4、ess對(duì)象的方式來(lái)指定參數(shù)，例如： 復(fù)制代碼代碼如下:less = env: "development",loglevel: 2,async: false,fileasync: false,poll: 1000,functions: ,dumplinenumbers: "comments",relativeurls: false,globalvars: var1: '"string value"',var2: 'regular value',rootpat

5、h: ":/; 但是這影響全部初始鏈接標(biāo)志。你也可以在指定的腳本標(biāo)簽的增強(qiáng)選項(xiàng)，如下： 復(fù)制代碼代碼如下: 或者，你也可以在鏈接配置參數(shù)籠罩某些選項(xiàng)，如下： 復(fù)制代碼代碼如下: 注重：以上三種配置參數(shù)的優(yōu)先級(jí)為：link標(biāo)簽的>script標(biāo)簽>全局對(duì)象對(duì)象屬性名稱(chēng)不駝峰link標(biāo)簽的配置只和時(shí)光選項(xiàng)有關(guān)，其他不起作用觀看模式：假如用法觀看模式，則配置參數(shù)的env為development。然后在less.js文件加載之后調(diào)用less.watch()，如下： 復(fù)制代碼代碼如下:less = env: 'development'less.watch()

6、; 注重： 假如啟動(dòng)了觀看模式，則掃瞄器會(huì)不斷哀求less文件，按照l(shuí)ast-modified參數(shù)推斷是否重新渲染頁(yè)面，這會(huì)造成很大的性能消耗，所以在線(xiàn)上不要開(kāi)啟觀看模式。假如是開(kāi)發(fā)環(huán)境，這便利了我們觀看效果。你也可以在href后面加上'!watch'來(lái)觸發(fā)觀看模式。 完整demo： reset.less是重置掃瞄器默認(rèn)樣式，config.js是掃瞄器選項(xiàng)的配置參數(shù)，如下：config.js 復(fù)制代碼代碼如下:less = env: "development", / or "production"async

7、: false, / load imports asyncfileasync: false, / load imports async when in a page under/ a file protocolpoll: 1000, / when in watch mode, time in ms between pollsfunctions: , / user functions, keyed by namedumplinenumbers: "all", / "comment" or "mediaque

8、ry" or "all"relativeurls: false,/ whether to adjust url's to be relative/ if false, url's are already relative to the/ entry less filerootpath: ":/"/ a path to add on to the start of every url/resource; index.html 復(fù)制代碼代碼如下:less.watch(); 參數(shù)詳解：async

9、type: booleandefault: false是否異步加載重要文件dumplinenumberstype: stringoptions: ''| 'comments'|'mediaquery'|'all'default: ''假如設(shè)置了，這增強(qiáng)了源代碼行信息輸出的css文件。這有助于您調(diào)試，分析其中一個(gè)特定的規(guī)章是從哪里來(lái)的。comments 選項(xiàng)用于輸出user-understandable內(nèi)容,mediaquery 選項(xiàng)用于用法火狐插件解析css文件信息.envtype: stringoptions:

10、development or productiondefault: depends on page url運(yùn)行環(huán)境，假如是production，你的css文件將被緩存到本地并且信息不會(huì)輸出到控制臺(tái)。假如url以file:/開(kāi)始或者在你本地或者沒(méi)有標(biāo)準(zhǔn)的端口，這都將被認(rèn)為是development模式。例如：less = env: 'production' ;errorreportingtype: stringoptions: html|console|functiondefault: html設(shè)置編譯失敗時(shí)錯(cuò)誤報(bào)告的辦法。fileasynctype: booleandefault

11、: false當(dāng)以file協(xié)議拜訪(fǎng)頁(yè)面，是否異步引入文件functionstype: object用戶(hù)自定義函數(shù)e.g.less = functions: myfunc: function() return new(less.tree.dimension)(1);可以像less函數(shù)一樣用法它。.my-class border-width: unit(myfunc(), px);logleveltype: numberdefault: 2在控制臺(tái)輸出日志的數(shù)量。假如是production環(huán)境，將不會(huì)輸出任何信息。2 - information and errors1 - errors0 - no

12、thingpolltype: integerdefault: 1000在觀看模式下，測(cè)試的時(shí)光。relativeurlstype: booleandefault: false用法相對(duì)路勁。假如設(shè)置false，則url是相對(duì)根名目文件。globalvarstype: objectdefault: undefined全局變量列表注入代碼。字符串類(lèi)型的變量必需顯式地包含引號(hào)。less.globalvars = myvar: "ddffee", mystr: "/"quoted/"" ;這個(gè)選項(xiàng)定義了一個(gè)可以被文件引用的變量。這個(gè)變量也可以在文件中重新定義。modifyvarstype: objectdefault: undefinedsame format as globalvars.與 globalvars參數(shù)含義相反,它將會(huì)在你文件最后定義，這意味著它將重寫(xiě)你在文件定義的。rootpathtype: stringdefault: