less的語法規則詳解

2021-10-07 11:08:15 字數 2405 閱讀 5928

變數

less語法支援把乙個值,可以是顏色值,寬度,或者其他的任何屬性值和一段字串。用乙個變數儲存起來。這樣方便後期再出現重複的值可以直接使用自己定義的自己更為熟係的變數名直接賦值。

// 定義乙個顏色的變數

@gray: #aaa;

div// 解釋成css格式

div

定義的變數不會被解釋成css**。

可以在任何地方定義變數。混合

這是一種能夠把一組css樣式通過有點類似於js函式執行時的寫法的操作加到另外一組css樣式中,方便設定部分同樣的樣式。

比如設定乙個元素左右上下都居中

// less**

.center

div// 解釋成css樣式

.center

div

新建了乙個center類,然後在div裡面通過.center()的形式呼叫,div將會得到center這個類的所有樣式。

不只是使用類選擇器才能實現,使用其他任何選擇器都能達到此效果。對於寫部分相同的樣式很友好。

巢狀有些時候寫後代選擇器,都是父選擇器 空格 再加上後代的選擇器的名字。在less中可以使用巢狀的方式寫入。

// less寫法

div}

// 解釋成css**

div

div span

個人認為寫法上並沒有官方介紹的更加簡潔,都是一樣的吧。增加了閱讀上的便利這是真的。就類似於es6中class建立建構函式,不用把方法(在原型上)和函式分開寫一樣。

運算css中提供了calc這個函式可以用於運算,例如寬度的加減等等。在less的語法中就不需要借助calc這個函式,可以直接寫加減乘除進行運算。

@width: 100px + 10px; // 結果是110px
對於單位不同的運算,比如寬度值px與vw相加,不一樣的單位最終結果將都以運算最左側運算元的單位型別為準。最左側的如果沒有單位,將按照第乙個出現單位的單位為準。

// less語法

div// 解釋成css

div

在顏色上也可以進行加減乘除。顏色可以通過十六進製制的方式表示,也可以看作是數字上的運算。

@color: #224488 / 2; //結果是 #112244
// less

div// 解釋成css

div

a在十六進製制中是10。

轉義允許使用任意字串作為屬性或者變數值,任何 ~「anything」 或 ~『anything』 形式的內容都將按原樣輸出

// less

@min768: ~"(min-width: 768px)";

.element

}// 編譯成css

@media (min-width: 768px)

}

方便對變數名很長的變數再去宣告乙個變數儲存。在3.5的版本之後引號和波浪號可以直接省略。

函式less中封裝了很多函式用於轉換顏色、處理字串、算術運算等。主要用於方便對這些的操作。

命名空間和訪問符

在某些時候如果你想使用乙個混合裡面的部分樣式。你可以這樣寫

// less部分

#div()

background-color: #aaa;

}span

// 解釋成css

span

通過這種方法,可以引出乙個新功能對映

對映

// less部分

#colors()

.button

// 解釋成css

.button

變數作用域

和js的作用域一樣,當前找不到去父級找,父級找不到去祖先級找。

@var: red;

#page

}

並且宣告不一定非得寫在之前

// 效果和上面一致

@var: red;

#page

@var: white;

}

匯入

less檔案匯入其他的less檔案和css檔案匯入其他css檔案一樣,使用@import。less檔案內也可以匯入css檔案,如果匯入的 是less檔案,可以省略.less

@import "index"; // 匯入的是index.less檔案

@import "main.css"; // 匯入main.css檔案

XML 語法規則

xml的語法規則非常簡單,同時也是非常嚴格的 它易於學習,易於使用。因此,開發能夠識別和處理xml的軟體也是非常容易的。xml文件使用自述式語法,並且,語法規則非常簡單。tove jani reminder don t forget me this weekend 文件的第一行 xml宣告 定義xm...

C 語法規則

c 中的布林型別 布林型別只占用乙個bit 但是如果連續定義多個布林型別時,編譯器可能會多個布林型別定義在一起。true 編譯器用1來表示。false 編譯器用0來表示。將乙個其他型別的資料賦給布林型別變數 c 編譯器會將所有的非0的值轉換為true 1 將0 轉化為false 0 三木運算子?將乙...

Markdown語法規則

這裡可以看到官方的 markdown 語法規則文件,當然,後文我也會用自己的方式,闡述這些語法在實際使用中的用法。mac 平台 windows ios web 平台 標題是每篇文章都需要也是最常用的格式,在 markdown 中,如果一段文字被定義為標題,只要在這段文字前加 號即可。一級標題 二級標...