溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了瀏覽器端如何使用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">
注意：
以上三種配置參數的優先級為：link標簽的>script標簽>全局對象
對象屬性名稱不駝峰
link標簽的配置只和時間選項有關，其他不起作用
觀察模式：
如果使用觀察模式，則配置參數的env為development。然后在Less.js文件加載之后調用less.watch()，如下：
復制代碼
代碼如下:
<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script>
注意：
如果啟動了觀察模式，則瀏覽器會不斷請求less文件，根據Last-Modified參數判斷是否重新渲染頁面，這會造成很大的性能消耗，所以在線上不要開啟觀察模式。如果是開發環境，這方便了我們觀察效果。你也可以在href后面加上'#!watch'來觸發觀察模式。
完整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 選項用于使用火狐插件解析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,那么運行之前緩存將被清除。
關于“瀏覽器端如何使用Less”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“瀏覽器端如何使用Less”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
