CSS的預編譯——less語言基本語法教程(入門)
less語言基本語法教程(入門)
一、CSS解析
css是一門標記性語言,語法簡單,對使用者的要求也比較低。
缺點:1、對於css:使用css時需要書寫大量的看似沒有邏輯的程式碼,不方便維護和擴充套件,不利於複用;
2、對於開發者:如果一個程式設計師缺乏對css的編寫經驗,那麼想寫出組織良好且易於維護的css程式碼是一件很困難的事情。
二、LESS簡介
LESS 是一門 CSS 預處理語言,LESS在CSS的語法基礎上增加了變數、Mixin、函式等特性,使 CSS 更易維護和擴充套件,可以讓我們用更少的程式碼做更多的事情。另外,
官網地址:http://lesscss.org/ (英文網)
http://less.bootcss.com/ (中文網)
bootstrap官網中less教程: http://www.bootcss.com/p/lesscss/
三、LESS引入
1、客戶端使用.less檔案: 先要從 http://lesscss.org 下載 less.js 檔案,然後在我們需要引入 LESS 原始檔的 HTML 中加入如下程式碼:
(1)<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
(2)引入手機端初始化.css(reset.css)
(3)用rem來寫的話必須引入media-100.css和iconfont.css (media-100.css檔案是封裝好的css,兩者屬於可選)
(4)<link rel="stylesheet/less" type="text/css" href="styles.less">
注意 :此處的rel屬性值是“ stylesheet/less ”。
自己寫的less原始檔一定要在less.js引入之前引入 ,才能保證自己的less原始檔正確編譯解析。
(5)<script src="less.min.js" type="text/javascript"></script>
2.在開發工具中使用:主要是藉助於LESS的編譯器,將less原始檔編譯生成最終的css檔案( 推薦 )
以HBulider開發工具為例:
(1)開啟HBuilder--工具 -- 預編譯器設定 - -新建 -- 檔案字尾 .less--觸發命令地址 (選擇...找到.cmd的路徑)--命令引數 %FileName% %FileBaseName%.min.js --- 智慧完成/確定
(2)在專案裡面新建less檔案,寫less時系統會自動編譯成css檔案(如果沒有成功,關閉HBuilder,右鍵以管理員身份開啟)
四、LESS的使用(CSS樣式處理)
1、變數:一次定義可以重複使用
變數允許我們單獨定義一系列通用的樣式,然後在需要的時候去呼叫,所以在做全域性樣式調整的時候我們只需要修改幾行的程式碼就OK了。
|
|
2、混入--Mixins:先申明一個類,然後在其它類中呼叫當前這個類
混合可以將一個定義好的classA引入到另一個classB中,從而簡單的實現classB繼承classA中的所有屬性,我們還可以帶引數呼叫,就像使用函式一樣。
|
|
3、繼承
有類A用了一組樣式,另外一個類B也想用這個樣式,這樣的話類B可以繼承類A的樣式:
|
|
4、巢狀規則
我們可以在一個選擇器中巢狀另一個選擇器來實現繼承,這樣很大程度上減少了程式碼量,並且程式碼看起來更加的清晰,
其中&符號的使用——如果你想寫串聯選擇器而不是後代選擇器,就可以用到&了,這點對偽類尤其有用,如:hover 和:focus。
|
|
5、函式&運算
運算提供了加減乘除操作;我們可以做屬性和顏色的運算,這樣就可以實現屬性值之間的複雜關係。
LESS中的函式——映射了JavaScript程式碼,還可以操作屬性值。
|
|
|
|
6、作用域
LESS中的作用域和其他程式語言相似,LESS會從本地查詢變數或者混合模組,如果沒找到的話會去父級作用域中查到,直到找到為止。
|
|