正確使用less以及less變數variables

2021-10-03 02:32:35 字數 1316 閱讀 5032

初見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...