Less新手入門

2021-10-10 20:25:15 字數 2121 閱讀 2453

一、變數:@定義變數(例如@width)

二、混合(mixins)

.bordered

#menu a

三、巢狀(nesting)

/*將偽選擇器與混合一同使用。下面是乙個經典的 clearfix 技巧,重寫為乙個混合(& 表示當前選擇器的父級):*/

.clearfix

}

四、@規則和冒泡

@ 規則(例如 @media 或 @supports)可以與選擇器以相同的方式進行巢狀。@ 規則會被放在前面,同一規則集中的其它元素的相對順序保持不變。這叫做冒泡

.component

}@media

(min-width

: 1280px)

}

編譯成:

.component

@media

(min-width

: 768px) }

@media

(min-width

: 768px) and (

min-resolution

: 192dpi) }

@media

(min-width

: 1280px)

}

五、運算

算術運算子 +、-、*、/ 可以對任何數字、顏色或變數進行運算。如果可能的話,算術運算子在加、減或比較之前會進行單位換算。計算的結果以最左側運算元的單位型別為準。如果單位換算無效或失去意義,則忽略單位。無效的單位換算例如:px 到 cm 或 rad 到 % 的轉換。

六、轉義

轉義(escaping)允許你使用任意字串作為屬性或變數值。

@min768:(

min-width

: 768px)

;.element

}

編譯成:

@media

(min-width

: 768px)

}

七、函式

例如利用 percentage 函式將 0.5 轉換為 50%,將顏色飽和度增加 5%,以及顏色亮度降低 25% 並且色相值增加 8 等用法:

@base

: #f04615;

@width

: 0.5;

.class

八、命名空間和訪問符

#bundle()

}.tab

.citation

}/*下面把 .button 類混合到 #header a 中,我們可以這樣做:*/

#header a

九、對映

#colors()

.button

編譯成:

.button

十、作用域

less 中的作用域與 css 中的作用域非常類似。首先在本地查詢變數和混合,如果找不到,則從「父」級作用域繼承。

@var

: red;

#page

@var

: white;

}

一、注釋

「//」或者「/**/」

二、匯入

如果匯入的檔案是 .less 副檔名,則可以將副檔名省略掉

@import

"library"

; // library.less

@import

"typo.css"

;

ubuntu新手入門

ubuntu使用設定之介面篇 ubuntu系統裝好了,不過怎麼看上則呢麼醜醜的?好像mr徐的介面和我的不一樣呢,怎麼設定的呢?首先,讓我們來設定工具條。ubuntu預設2條工具條,讓我們來把他設定成和windows下一樣的吧。先讓我們在上面的工具條的空白的地方,選擇刪除面板。然後,讓我們在底下的面板...

XML新手入門

ibm的xml教程 xml是什麼?xml,或稱為可擴充套件標記語言 extensible markup language 是一種您可以用來建立自己的標記的標記語言。它由全球資訊網協會 w3c 建立,用來克服 html 即超文字標記語言 hypertext markup language 它是所有網頁...

SOA新手入門

什麼是soa 我們可能應該回答的第乙個問題也是最基本的問題。什麼是面向服務的體系結構 service oriented architecture,soa 這個問題的答案實際上涉及與開發相關的若干不同方面。soa 是一種 it 體系結構樣式,支援將您的業務作為鏈結服務或可重複業務任務進行整合,可在需要...