欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

瀏覽器端如何使用Less

  發(fā)布時(shí)間:2014-12-10 11:38:35   作者:佚名   我要評(píng)論
這篇文章主要介紹了瀏覽器端如何使用Less,需要的朋友可以參考下

 之前項(xiàng)目用過Less,現(xiàn)在負(fù)責(zé)的項(xiàng)目也要使用,所以就總結(jié)下Less,也方便以后查看。本文主要是講瀏覽器端如何使用Less。

簡(jiǎn)介:
  LESS是一種由Alexis Sellier設(shè)計(jì)的動(dòng)態(tài)層疊樣式表語(yǔ)言。LESS 是開源的,其第一個(gè)版本由Ruby寫成,但在后續(xù)的版本當(dāng)中,Ruby逐漸被替換為JavaScript。受益于JavaScript,LESS可以在客戶端上運(yùn)行(IE6+、Webkit、Firefox),也可以在服務(wù)端運(yùn)行(Node.js、Rhino)。

      本質(zhì)上,LESS 包含一套自定義的語(yǔ)法及一個(gè)解析器,用戶根據(jù)這些語(yǔ)法定義自己的樣式規(guī)則,這些規(guī)則最終會(huì)通過解析器,編譯生成對(duì)應(yīng)的 CSS 文件。LESS 并沒有裁剪 CSS 原有的特性,更不是用來(lái)取代 CSS 的,而是在現(xiàn)有 CSS 語(yǔ)法的基礎(chǔ)上,為 CSS 加入程序式語(yǔ)言的特性。你也可以再less文件中寫按照css規(guī)則寫樣式。

意義:
    改變傳統(tǒng)樣式的編寫方式,以面向?qū)ο蟮姆绞骄帉懀岣唛_發(fā)效率。

引入LESS:  
  首先,引入rel屬性的值是stylesheet/less的.less樣式表。如下:


復(fù)制代碼
代碼如下:

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

在渲染HTML頁(yè)面時(shí),less文件需要編譯成css文件。我們可以有很多種方法。在服務(wù)器端,如Node.js,我們有專門的less編譯模塊。如果是在客戶端,需要從LESS官網(wǎng)下載less.js文件,然后在HTML頁(yè)面中引入,如下:


復(fù)制代碼
代碼如下:

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

有了less編譯工具,我們就可以渲染頁(yè)面了。

  在瀏覽器中使用less.js開發(fā)是很好的,但不推薦用于生產(chǎn)環(huán)境中。瀏覽器端使用是在使用LESS開發(fā)時(shí)最直觀的一種方式。如果是在生產(chǎn)環(huán)境中,尤其是對(duì)性能要求比較高的場(chǎng)合,建議使用node或者其它第三方工具先編譯成CSS再上線使用。

注意:

確保包涵.less樣式表在less.js腳本之前
當(dāng)你引入多個(gè).less樣式表時(shí),它們都是獨(dú)立編譯的。所以,在每個(gè)文件中定義的變量、混合、命名空間都不會(huì)被其它的文件共享。
必須通過服務(wù)器環(huán)境訪問頁(yè)面,否則報(bào)錯(cuò)
瀏覽器選項(xiàng):
  你可以引入<script src="less.js"></script>之前通過創(chuàng)建一個(gè)全局less對(duì)象的方式來(lái)指定參數(shù),例如:


復(fù)制代碼
代碼如下:

<!-- set options before less.js script -->
<script>
less = {
env: "development",
logLevel: 2,
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
globalVars: {
var1: '"string value"',
var2: 'regular value'
},
rootpath: ":/a.com/"
};
</script>
<script src="less.js"></script>

但是這影響所有初始鏈接標(biāo)記。你也可以在指定的腳本標(biāo)簽的增加選項(xiàng),如下:


復(fù)制代碼
代碼如下:

<script src="less.js" data-env="development"></script>

或者,你也可以在鏈接配置參數(shù)覆蓋某些選項(xiàng),如下:


復(fù)制代碼
代碼如下:

<link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">

注意:

以上三種配置參數(shù)的優(yōu)先級(jí)為:link標(biāo)簽的>script標(biāo)簽>全局對(duì)象
對(duì)象屬性名稱不駝峰
link標(biāo)簽的配置只和時(shí)間選項(xiàng)有關(guān),其他不起作用
觀察模式:
  如果使用觀察模式,則配置參數(shù)的env為development。然后在Less.js文件加載之后調(diào)用less.watch(),如下:


復(fù)制代碼
代碼如下:

<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script>

 注意:

  如果啟動(dòng)了觀察模式,則瀏覽器會(huì)不斷請(qǐng)求less文件,根據(jù)Last-Modified參數(shù)判斷是否重新渲染頁(yè)面,這會(huì)造成很大的性能消耗,所以在線上不要開啟觀察模式。如果是開發(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: false, // load imports async
fileAsync: false, // load imports async when in a page under
// a file protocol
poll: 1000, // when in watch mode, time in ms between polls
functions: {}, // user functions, keyed by name
dumpLineNumbers: "all", // "comment" or "mediaQuery" or "all"
relativeUrls: false,// whether to adjust url's to be relative
// if false, url's are already relative to the
// entry less file
rootpath: ":/"http:// a path to add on to the start of every url
//resource
};

index.html


復(fù)制代碼
代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet/less" type="text/css" href="./less/reset.less" />
<link rel="stylesheet/less" type="text/css" href="./less/styles.less" />
<script src="./js/config.js"></script>
<script src="./js/less-1.3.3.min.js"></script>
<script>less.watch();</script>
</head>
<body>
</body>
</html>

參數(shù)詳解:
async

Type: Boolean
Default: false
是否異步加載重要文件

dumpLineNumbers

Type: String
Options: ''| 'comments'|'mediaquery'|'all'
Default: ''
如果設(shè)置了,這增加了源代碼行信息輸出的CSS文件。這有助于您調(diào)試,分析其中一個(gè)特定的規(guī)則是從哪里來(lái)的。
comments 選項(xiàng)用于輸出user-understandable內(nèi)容,
mediaquery 選項(xiàng)用于使用火狐插件解析css文件信息.

env

Type: String
Options: development or production
Default: depends on page URL
運(yùn)行環(huán)境,如果是production,你的css文件將被緩存到本地并且信息不會(huì)輸出到控制臺(tái)。如果url以file://開頭或者在你本地或者沒有標(biāo)準(zhǔn)的端口,這都將被認(rèn)為是development模式。
例如:
less = { env: 'production' };

errorReporting

Type: String
Options: html|console|function
Default: html
設(shè)置編譯失敗時(shí)錯(cuò)誤報(bào)告的方法。

fileAsync

Type: Boolean
Default: false
當(dāng)以file協(xié)議訪問頁(yè)面,是否異步引入文件

functions

Type: object
用戶自定義函數(shù)
e.g.
less = {
functions: {
myfunc: function() {
return new(less.tree.Dimension)(1);
}
}
};
可以像Less函數(shù)一樣使用它。
.my-class {
border-width: unit(myfunc(), px);
}

logLevel

Type: Number
Default: 2
在控制臺(tái)輸出日志的數(shù)量。如果是production環(huán)境,將不會(huì)輸出任何信息。
2 - Information and errors1 - Errors0 - Nothing

poll

Type: Integer
Default: 1000
在觀察模式下,測(cè)試的時(shí)間。

relativeUrls

Type: Boolean
Default: false
使用相對(duì)路勁。如果設(shè)置FALSE,則url是相對(duì)根目錄文件。

globalVars

Type: Object
Default: undefined
全局變量列表注入代碼。“字符串”類型的變量必須顯式地包含引號(hào)。
less.globalVars = { myvar: "#ddffee", mystr: "\"quoted\"" };
這個(gè)選項(xiàng)定義了一個(gè)可以被文件引用的變量。這個(gè)變量也可以在文件中重新定義。

modifyVars

Type: Object
Default: undefined
Same format as globalVars.
與 globalVars參數(shù)含義相反,它將會(huì)在你文件最后定義,這意味著它將重寫你在文件定義的。

rootpath

Type: String
Default: false
設(shè)置根目錄,所有的Less文件都會(huì)以這個(gè)目錄開始。

useFileCache

Type: Boolean
Default: true (previously false in before v2)
是否要使用每個(gè)會(huì)話文件緩存。緩存文件可以使用modifyVars,并且它不會(huì)再次檢索所有文件。如果您使用觀察模式或調(diào)用刷新加載設(shè)置為true,那么運(yùn)行之前緩存將被清除。

相關(guān)文章

  • LESS 讓css也支持變量,運(yùn)算符,include,嵌套規(guī)則等等

    最近在網(wǎng)上看到1個(gè)很有意思的CSS擴(kuò)展,這里介紹給大家。LESS 最早是1個(gè)ruby的gem,用于擴(kuò)展css的語(yǔ)法,用了LESS后,可以在css中使用變量,運(yùn)算符,include,嵌套規(guī)則等等。
    2010-07-04
  • less讓css具有動(dòng)態(tài)語(yǔ)言的特性

    Less 是一種樣式語(yǔ)言,它將 css 賦予了動(dòng)態(tài)語(yǔ)言的特性,如變量、 繼承、 運(yùn)算、 函數(shù)。less 既可以在客戶端上運(yùn)行(支持IE 6+, Webkit, Firefox),也可以借助 Node.js 或
    2012-11-20
  • LESS 讓css也支持變量,運(yùn)算符,include,嵌套規(guī)則

    最近在網(wǎng)上看到1個(gè)很有意思的CSS擴(kuò)展,這里介紹給大家。LESS 最早是1個(gè)ruby的gem,用于擴(kuò)展css的語(yǔ)法,用了LESS后,可以在css中使用變量,運(yùn)算符,include,嵌套規(guī)則等等。
    2010-07-04
  • CSS less優(yōu)化

    less用變量 (variables),引用(mixins),表達(dá)式(operations),嵌套規(guī)則(nested rules)來(lái)擴(kuò)展css開發(fā).
    2009-08-14
  • 學(xué)習(xí)CSS預(yù)處理器:Sass和less進(jìn)行對(duì)比

    Css可以讓你做很多事情,但它畢竟是給瀏覽器認(rèn)的東西,對(duì)開發(fā)者來(lái)說(shuō),Css缺乏很多特性
    2012-07-11
  • Less里css表達(dá)式的寫法示例介紹

    這篇文章主要介紹了Less里css表達(dá)式的寫法,需要的朋友可以參考下。修復(fù)IE6的fixed,IE7+已經(jīng)支持了
    2014-06-18
  • less開發(fā)指南

    LESS(是.less后綴名的文件) 包含一套自定義的語(yǔ)法及一個(gè)解析器,我們根據(jù)這些語(yǔ)法定義自己的樣式規(guī)則,為 CSS 加入程序式語(yǔ)言的特性,如變量、繼承、運(yùn)算、嵌套等,更方便
    2014-04-22

最新評(píng)論