less基礎語法

2021-07-27 07:10:14 字數 1084 閱讀 7227

less 是一門 css 預處理語言,它擴充了 css 語言,增加了諸如變數、混合(mixin)、函式等功能,讓 css 更易維護、方便製作主題、擴充。

node、瀏覽器和 rhino 平台都可以。本人使用的則是國人的koala。

分為兩種://和/**/

1.//:此種編譯後不會出現在css檔案中,不編譯

2./**/:這種編譯後仍會保留,編譯

宣告格式:@變數名:值;

即可看做將打包好的設定進行復用,例如:

//less 混合

.border1

//帶參混合(引數可多個)

.border2(@border_width:1px)

.box2

在混合的基礎上可選擇同一類的不同設定,下面參考寫三角的例子(對於寫三角不熟悉的朋友可參考:

.********

.********(@,@w:5px,@c:#ccc)//這一行可不設定,@_這個引數表示,使用這個模式的都將預設包含這段**

.sanjiao//呼叫

匹配模式-定位,其中引數固定

.pos(r)

.pos(a)

.pos(f)

.usepos

less支援加減乘除運算,常用於對長度的設定,也支援顏色的運算

就是對巢狀的標籤,可以巢狀的設定樣式,比如:

html中的

則less中就可以用這種格式去設定樣式了

.lista}

.lista}}

處理當css中有一些less不認識的語法,或錯誤的css

格式:~』your code』

例如css3中有calc(),這個less是不認識的,所以可以如:width:~』calc(300px-100px)』;那麼在css中就會師這樣的width:calc(300px-100px);即避免編譯

less基本語法

less的注釋有兩種方式,一種為css用的 這種注釋的方法會被less所編譯成css。另一種為 這種不會被less所編譯 less 會被編譯 不會被編譯css輸出 會被編譯 less中用 變數名 值的方法來生命變數 less test width 100px test color red box c...

Less 語法快速入門

less 是一門 css 預處理語言其可以執行在 node 或瀏覽器端。它將傳統的 css 樣式結構單一的排版順序進行了優化,讓我們可以通過層級巢狀的方式將 css 類名與html結構一一對應起來。這樣的好處不僅僅使得 css 樣式排版更清楚,也可以讓我們在後期的修改中快速查詢,同時減少了 量,一定...

less基本語法筆記

以 開頭的注釋,不會被編譯到css檔案中 以 包裹的注釋會被編譯到css檔案中 a 使用 來宣告乙個變數 例 red red mainb 作為普通屬性值來使用 直接使用 red c 作為選擇器和屬性名使用 的形式 variables my selector banner usage d 作為url ...