Less變數詳解

2021-09-02 16:31:56 字數 957 閱讀 7896

普通的變數

css預設不支援變數,當我們使用

less

之後就可以使用。

其定義方式是 @變數名

:值 ,如下,我們定義乙個變數

green,

設定乙個顏色

green,

然後將網頁背景設定為綠色:

@green: #801f77;

header

注意:由於變數只能定義一次,實際上他們就是「常量

作為選擇器和屬性名

使用時將變數以@

的方式使用,使用例子如下:

作為選擇器和屬性名的變數

@kuandu:width;

.@:150px }

注意:這裡的變數即使選擇器又是屬性名,不能寫錯。

作為url

使用時,使用」」將變數的值括起來,使用時同樣將變數以

@的方式使用。使用例子如下:

//作為

url的變數

@imgurl:"";

headerbdlogo.png");

height: 500px; }

延遲載入

延遲載入:變數是延遲載入的,在使用前不一定要預先說明。

意思是指:在前面使用了這個變數,但沒有定義,但可以在後面給他定義出來,不影響輸出。

定義多個相同名稱的變數時

在定義乙個變數兩次時,只會使用最後定義的變數,less會從當前作用域向上搜尋。這個行為類似於

css的定義中始終使用最後定義的屬性值。使用例項如下:

//定義多個相同名稱的變數時

@var: 0;

.class

one: @var; //這是的值是1}

LESS詳解之變數

變數基本上是每個語言指令碼上都會涉及的乙個小小知識點,是學好語言指令碼的必經之路。less中也可以設定變數,然後通過變數可以改變整個 的設計風格。良好的掌握less中變數的用法,是less的基礎。使用方法就是在 後新增變數名稱然後與變數值用冒號 鏈結。如下 less width 300px meng...

less 注釋 變數

1 注釋 在less中,注釋的方法有2中。一種是雙斜槓 另一種是 在css中,只認 而雙斜槓 css是不認的。所以在less中,用 的注釋是可以被編譯出來的。而雙斜槓 在less的編譯過程中,是忽略掉的。less 雙斜槓注釋 傳統樣式注釋 編譯後的css 傳統樣式注釋 變數 less變數的宣告是用 ...

less 命令詳解

less less 與more命令類似,但可以通過翻頁鍵檢視上下頁的內容 b 緩衝區大小 設定緩衝區的大小 e 當檔案顯示結束後,自動離開 f 強迫開啟特殊檔案,例如外圍裝置代號 目錄和二進位制檔案 i 忽略搜尋時的大小寫 m 顯示類似more命令的百分比 n 顯示每行的行號 o 檔名 將less ...