首頁 > 開發者 > JavaScript
瀏覽器端Less，端less
摘要：
之前項目用過Less，現在負責的項目也要使用，所以就總結下Less，也方便以後查看。本文主要是講瀏覽器端如何使用Less。
簡介：LESS是一種由Alexis Sellier設計的動態層疊樣式表語言。LESS 是開源的，其第一個版本由Ruby寫成，但在後續的版本當中，Ruby逐漸被替換為JavaScript。受益於JavaScript，LESS可以在用戶端上運行（IE6+、Webkit、Firefox），也可以在服務端運行（Node.js、Rhino）。
本質上，LESS 包含一套自訂的文法及一個解析器，使用者根據這些文法定義自己的樣式規則，這些規則最終會通過解析器，編譯產生對應的 CSS 檔案。LESS 並沒有裁剪 CSS 原有的特性，更不是用來取代 CSS 的，而是在現有 CSS 文法的基礎上，為 CSS 加入程式式語言的特性。你也可以再less檔案中寫按照css規則寫樣式。
意義：改變傳統樣式的編寫方式，以物件導向的方式編寫，提高開發效率。
引入LESS： 首先，引入rel屬性的值是stylesheet/less的.less樣式表。如下：
<link rel="stylesheet/less" type="text/css" href="styles.less" />
在渲染HTML頁面時，less檔案需要編譯成css檔案。我們可以有很多種方法。在伺服器端，如Node.js，我們有專門的less編譯模組。如果是在用戶端，需要從LESS官網下載less.js檔案，然後在HTML頁面中引入，如下：
<script src="less.js" type="text/javascript"></script>
有了less編譯工具，我們就可以渲染頁面了。
在瀏覽器中使用less.js開發是很好的，但不推薦用於生產環境中。瀏覽器端使用是在使用LESS開發時最直觀的一種方式。如果是在生產環境中，尤其是對效能要求比較高的場合，建議使用node或者其它第三方工具先編譯成CSS再上線使用。
注意：
.less樣式表在less.js指令碼之前.less樣式表時，它們都是獨立編譯的。所以，在每個檔案中定義的變數、混合、命名空間都不會被其它的檔案分享權限設定。 你可以引入<script src="less.js"></script>之前通過建立一個全域less對象的方式來指定參數，例如：
<!-- 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>
但是這影響所有初始連結標記。你也可以在指定的指令碼標籤的增加選項，如下：
<script src="less.js" data-env="development"></script>
或者，你也可以在連結配置參數覆蓋某些選項，如下：
<link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">
注意：
如果使用觀察模式，則配置參數的env為development。然後在Less.js檔案載入之後調用less.watch()，如下：
<script>less = { env: 'development'};</script><script src="less.js"></script><script>less.watch();</script>
注意：
如果啟動了觀察模式，則瀏覽器會不斷請求less檔案，根據Last-Modified參數判斷是否重新渲染頁面，這會造成很大的效能消耗，所以線上上不要開啟觀察模式。如果是開發環境，這方便了我們觀察效果。
完整demo：reset.less是重設瀏覽器預設樣式，config.js是瀏覽器選項的配置參數，如下：
config.js
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: ":/"// a path to add on to the start of every url //resource};
index.html
<!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>
參數詳解：
async
Type: Boolean
Default: false
是否非同步載入重要檔案
dumpLineNumbers
Type: String
Options: ''| 'comments'|'mediaquery'|'all'
Default: ''
如果設定了，這增加了原始碼行資訊輸出的CSS檔案。這有助於您調試，分析其中一個特定的規則是從哪裡來的。
comments 選項用於輸出user-understandable內容,
mediaquery 選項用於使用Firefox外掛程式解析css檔案資訊.
env
Type: String
Options: development or production
Default: depends on page URL
運行環境，如果是production，你的css檔案將被緩衝到本地並且資訊不會輸出到控制台。如果url以file://開頭或者在你本地或者沒有標準的連接埠，這都將被認為是development模式。
例如：
less = { env: 'production' };
errorReporting
Type: String
Options: html|console|function
Default: html
設定編譯失敗時錯誤報表的方法。
fileAsync
Type: Boolean
Default: false
當以file協議訪問頁面，是否非同步引入檔案
functions
Type: object
使用者自訂函數
e.g.
less = {
functions: {
myfunc: function() {
return new(less.tree.Dimension)(1);
}
}
};
可以像Less函數一樣使用它。
.my-class {
border-width: unit(myfunc(), px);
}
logLevel
Type: Number
Default: 2
在控制台輸出日誌的數量。如果是production環境，將不會輸出任何資訊。
2 - Information and errors1 - Errors0 - Nothing
poll
Type: Integer
Default: 1000
在觀察模式下，測試的時間。
relativeUrls
Type: Boolean
Default: false
使用相對路勁。如果設定FALSE，則url是相對根目錄檔案。
globalVars
Type: Object
Default: undefined
全域變數列表注入代碼。“字串”類型的變數必須顯式地包含引號。
less.globalVars = { myvar: "#ddffee", mystr: "\"quoted\"" };
這個選項定義了一個可以被檔案引用的變數。這個變數也可以在檔案中重新定義。
modifyVars
Type: Object
Default: undefined
Same format as globalVars.
與 globalVars參數含義相反,它將會在你檔案最後定義，這意味著它將重寫你在檔案定義的。
rootpath
Type: String
Default: false
設定根目錄，所有的Less檔案都會以這個目錄開始。
useFileCache
Type: Boolean
Default: true (previously false in before v2)
是否要使用每個會話檔案快取。快取檔案可以使用modifyVars，並且它不會再次檢索所有檔案。如果您使用觀察模式或調用重新整理載入設定為true,那麼運行之前緩衝將被清除。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
