Less的基本用法

2021-10-10 09:57:29 字數 1229 閱讀 4167

less是一門css的預處理語言

less是乙個css的增強版,通過less可以編寫更少的**

實現更強大的樣式

在less中新增了許多新特性,像對變數的支援、對mixin的支援....

less的語法大體上和css語法一直,但less中增加了許多對css擴充套件

瀏覽器無法直接執行less**,要執行必須先將less轉換為css再由

瀏覽器執行

less也是一種動態樣式語言. 對css賦予了動態語言的特性,

如變數,繼承,運算, 函式. less 既可以在客戶端上執行 (支援ie 6+, webkit, firefox),

也可在服務端執行 (借助 node.js)。

body

}.box3

}// 變數:在變數中可以儲存乙個任意的值

// 並且可以在需要時,任意改變變數的值

//變數的語法:@變數名

@a:100px;

@b:#bfa;

@c:box6;

.box5

// 作為類名或者一部分值使用時必須以@的形式使用

.@/1.png");

}@d:200px;

@d:300px;

// 就近原則 下面d為300px

div// 可以在變數宣告前就使用變數

@e:335px;

div

.box1

>.box3

}// 為box1設定hover

// &表示外層父元素

&:hover

}

p1

// extend對當前選擇器擴充套件指定選擇器的樣式(選擇器分組)

.p2:extend(.p1)

.p3// 使用類選擇器時可以在選擇器後新增乙個括號,這時實際上我們就建立了乙個mixins

.p4()

.p5.p5

// 混合函式 混合函式中可以直接設定變數

.test(@w:100px,@h:200px,@bg-color:red)

div

span

body:hover

//將其他的less引入到當前less中

@import "syntax2.less";

.box1

Linux命令之less基本用法

linux中的less命令主要用來瀏覽檔案內容,與more命令的用法相似,不同於more命令的是,less命令可往回捲動瀏覽以看過的部分 less 的用法比起 more 更加的有彈性。在 more 的時候,我們並沒有辦法向前面翻,只能往後面看,但若使用了 less 時,就可以使用 pageup pa...

Less的常見用法

宣告初始化變數 xs 200px 使用上面的變數 box1 此時.box1是乙個混合,可以如下使用 box2 預設乙個混合 class1 使用變數和剛預設的混合 box3 變數的運算 box4 帶引數的混合 jh1 dd,color1,color2 box5 帶預設值引數的混合 jh2 color1...

less的基本使用

3 node編譯 1 變數的定義 變數名 值2 變數的使用 作為屬性值使用 變數名 作為選擇器或者屬性名使用 先從本作用域找,沒有再去上層作用域找,在同一作用域下,變數定義兩次,後面的會覆蓋前面的 1 css注釋,編譯成css後依然存在 2 less注釋,編譯成css後不顯示 1 普通混合 會在cs...