Less的語言特性，基本的使用方法簡潔版

2021-09-24 15:44:02 字數 1064 閱讀 3713

npm install -g less
使用以下命令將style.less檔案編譯為style.css：

lessc style.less style.css
可以向寫網頁一樣的巢狀規則來使用less。

可以使用變數，並使用數**算變數前面需要使用@符號。

檔案內容


@color:ccc;


@fontsize:10px;


​div


//以上**編譯出來以後會變成


div


p轉義字元之後雙引號裡面的東西，是什麼就顯示什麼。
可以直接在less使用函式



@width:1.0;


div


.class1


}}.class
變數範圍指定可用變數的位置。變數首先從本地作用域搜尋，如果本地作用域不可用，就會從父作用域中搜尋。



@var: @a;


@a: 15px;


​.myclass
注釋也只用加//即可，編譯以後直接不會存在。

使用@import 「絕對路徑或者相對路徑」




div


@import "./style.less"


div
extend是乙個less偽類，它通過使用:extend選擇器在乙個選擇器中擴充套件其他選擇器樣式。


//div1這個類會擁有div2這個類的樣式


.div1


.div2
在less中允許乙個類將另外乙個類當做屬性，其屬性就是這個類的屬性。


.div1


.div2


.div3
.border( @w; @s; @c)


//就可以使用十一的方式


div
.cont(@count) when (@count > 0) 


div
使用的是&


a 


}
參考文章：
 
Less預處理語言的基本使用
使用 宣告乙個變數 vari blue 作為屬性值來使用上面申明的變數，直接使用 vari wrap 等價於 wrap 宣告變數 select wrap mar margin 使用變數 auto 等價於 wrap imgurl src img wrap logo.png 等價於 wrap 變數是延遲...


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


less的使用 基本語法 編譯
注釋 會被刪除 不會被刪除1.變數為屬性值定義變數 變數名 變數值 使用變數 屬性 變數名 變數 main color 333 用法 body2.變數為屬性或者為選擇器定義變數 變數名 變數值 使用變數 屬性值 變數 property color 屬性 用法 body 333 變數 myselect...