瀏覽器端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">
注意:
- 以上三種配置引數的優先順序為: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,那麼執行之前快取將被清除。
相關文章
- 如何在瀏覽器端加密瀏覽器加密
- 移動端瀏覽器問題瀏覽器
- 常見瀏覽器終端檢測瀏覽器
- 國內安卓端瀏覽器調研安卓瀏覽器
- 谷歌瀏覽器除錯移動端谷歌瀏覽器除錯
- 微信端瀏覽器title值的修改瀏覽器
- 瀏覽器端建立可下載檔案瀏覽器
- 夸克瀏覽器PC端功能體驗瀏覽器
- Linux下用less瀏覽大檔案Linux
- 【瀏覽器】瀏覽器基本工作原理瀏覽器
- 客戶端(瀏覽器端)資料儲存技術概覽客戶端瀏覽器
- html5多終端瀏覽器相容HTML瀏覽器
- 瀏覽器瀏覽器
- Chrome 瀏覽器修改 UA 模擬其它瀏覽器,包括移動瀏覽器Chrome瀏覽器
- 理解事件迴圈(從瀏覽器端到node端)事件瀏覽器
- 基石-初見瀏覽器(一):瀏覽器渲染瀏覽器
- Min瀏覽器: 更快更輕量瀏覽器瀏覽器
- .net火狐瀏覽器 ie瀏覽器 判斷瀏覽器
- PC端瀏覽器手機模擬器滑屏dome瀏覽器
- 谷歌瀏覽器測試移動端網頁谷歌瀏覽器網頁
- 徹底弄懂瀏覽器端的Event-Loop瀏覽器OOP
- 九種瀏覽器端快取方法知多少瀏覽器快取
- 9大瀏覽器端快取機制分析瀏覽器快取
- 瀏覽器端的 9 種快取機制瀏覽器快取
- microsoft edge是ie瀏覽器嗎 edge瀏覽器和ie瀏覽器一樣嗎ROS瀏覽器
- 前端面試瀏覽器系列:瀏覽器快取前端面試瀏覽器快取
- “木偶”瀏覽器瀏覽器
- 瀏覽器原理瀏覽器
- 瀏覽器核心瀏覽器
- vivaldi瀏覽器瀏覽器
- Mozilla瀏覽器瀏覽器
- 瀏覽器引擎瀏覽器
- [瀏覽器]LocalStorage瀏覽器
- 瀏覽器渲染瀏覽器
- js檢測搜狗瀏覽器、百度瀏覽器、微信瀏覽器程式碼例項JS瀏覽器
- 判斷當前瀏覽器是不是微信瀏覽器瀏覽器
- 常見的瀏覽器端資料儲存方案瀏覽器
- 瀏覽器端儲存資料的終極指南瀏覽器