初見less
以//開始的注釋不會被編譯到css檔案中
以/**/包裹的注釋會被編譯在css檔案中
正確使用less
一、如何使用less
less檔案只有在被編譯後才能被瀏覽器識別使用
二、less編譯工具三、客戶端除錯方式
首先引用.less檔案 注意引用時使用link引入,然後將rel屬性設定為rel=「stylesheet/less」
然後引用less.js 注意:引入普通js引入方式一致,但是一定要放置在less樣式檔案之後
四、變數variables
(一)普通變數
1、變數的定義方式@
2、less編寫:
@blue:#f00;
#header
編譯結果:
#header
3、注意:由於前兩只能定義一次,實際上他們就是「常量」
(二)、作為選擇器和屬性名的變數
1、使用時將變數以@的方式使用
2、less編寫
@myselector:width;
.@ :960px;
height:500px;
}編譯結果:
.width
(三)作為url的變數
1、使用時,使用"「將變數的值括起來,使用時同樣將變數以@的方式使用
2、less編寫
@imgurl:「
body/bdlogo.png") no-repeat}
編譯結果: body
(四)延遲載入
1、延遲載入:變數是延遲載入的,在使用前不一定要預先宣告 也就是說變數可以先使用再定義 不影響效果
2、less編寫:
.lazy-eval
@var:@a;
@a:9%
編譯結果:.lazy-eval-scope
(五)定義多個相同名稱的變數時
1、在定義乙個變數兩次是,只會使用最後定義的變數,less會從當前作用域中向上搜尋,這個行為類似於css的定義中始終使用最後定義的屬性值。
2、less編寫
@var:0;
class
one:@var;
}編譯結果:
.class
.class .brass
LESS命令介紹以及使用
本文內容出處 less 工具也是對檔案或其它輸出進行分頁顯示的工具,應該說是linux正統檢視檔案內容的工具,功能極其強大。less 的用法比起 more 更加的有彈性。在 more 的時候,我們並沒有辦法向前面翻,只能往後面看,但若使用了 less 時,就可以使用 pageup pagedown ...
LESS命令簡單介紹以及使用
less命令簡單介紹以及使用 b 緩衝區大小 設定緩衝區的大小 e 當檔案顯示結束後,自動離開 f 強迫開啟特殊檔案,例如外圍裝置代號 目錄和二進位制檔案 i 忽略搜尋時的大小寫 m 顯示類似more命令的百分比 n 顯示每行的行號 o 檔名 將less 輸出的內容在指定檔案中儲存起來 q 不使用警...
less的基本語法以及使用
最近在專案的開發過程中,發現自己的css的 的層級解構不明確,而且很多的地方寫的比較凌亂。在後期新增功能的過程中,往往都是在上面加一段css,有時候比較懶,就會直接綴在css 的最後。這往往導致在後期修改css 的時候,很不容易找到自己的 less的出現很大程度上的幫我們解決了這個問題。less是c...