Less 使用小結

最新的less-loader配置有問題，採用5.0.0

npm

install [email protected]

/**

*/const
=require
("customize-cra"); 
module.exports =
override
(addlessloader()
);

使用@宣告，變數之間可進行運算操作；

@box-bg

:rgba
(12,123,56,9)
;.less-box

選擇器名稱:

@box-item

:item;
.@

@imgurl

:"../../static/images"
;.less-box
/less-bg.png")
;}

@bordercolor

:border-color;
.less-box
:red;
}

@base-size

:14px;
.less-box
}

可通過內部的屬性名，復用其屬性值。

@bordercolor

:border-color;
.less-box
:red;
p:nth-child(2)
}

通過引用其他選擇的樣式。可用的類選擇符、id選擇符

@box-bg

:rgba
(12,123,56,9)
;.item
.less-box
}

要使得該選擇器樣式不生效，只作為公用，直接書寫.item()，則最終輸出不會有.item的樣式：

.item()

.less-box
}

處理之間混合復用外，可針對複雜場景內部巢狀選擇器混合。

.less-box

}

!important處理

標記所有的屬性為!important

.less-box

}// 同
.less-box p:nth-child(7)

帶引數可以處理一些複雜的公用樣式@**表示。

多個引數表示：

帶引數處理，傳入自定義屬性值；

// 帶引數處理

.font-color
(@color
).less-box
}

// 帶引數處理

.font-color
(@color,@size
).less-box
}

.font-color

(@color
;@size
:24px)
.less-box
}

可以使用 rest 引數，

.minxin

(...)
;     // 匹配0-n 個引數
.minxin
(@size
:10px)
;  // 有預設值，可匹配 0 -1 個引數
.minxin
(@size
:10px,...)
; // 匹配 0 - n 個引數
.minxin
(@size
;...)
; // 無預設值，匹配1- n 個引數

模式匹配，可通過定義標識匹配要混合的樣式；

主要是針對同選擇器名的混合器，可通過不同標識區分；

// 帶引數處理

.font-color
(grey;
@color
;@size
:24px)
.font-color
(black;
@color
;@size
:32px)
.less-box
}

作為方法呼叫計算並返回值；

遞迴處理when判斷條件，內部遞迴呼叫；

巢狀在內部巢狀中&標識當前父級，其他選擇和普通的css一致。

@規則巢狀在選擇器元素內部。

@box-bg

:rgba
(12,123,56,9)
;.item
.less-box
.item()
;font-size
: 16px;
}}

.less-box

}// 同等於
.less-box-item

&對應父級選擇器，如果是多層巢狀，多次使用&則按層級對應。

一層巢狀&多次使用：

.less-box

}// 同等於
.less-box.less-box-less

.less-box}}

// 同等於
.less-box .item.less-box .item

&排列所有父級組合；更改選擇器的順序；

包括+、-、*、%可以對任意數字、顏色、變數進行計算。依據以左側運算元單位為準進行換算；

@base-size

:14px;
.less-box
}

可宣告字串作為屬性、變數值，進行引用。不同於變數的存在，可作為屬性名。

可處理一些邏輯操作，內建函式包括轉換顏色、處理字串、算術運算子等。

命名空間和訪問符

可以對一些用於混合的樣式進行分組。

對映可以設定一組混合和規則集

除了常用的一些特性之外，還有一些方便屬性復用的操作。

extend關鍵字

用於將其他選擇器的屬性復用合併到自己的樣式中。

// 外部公用的樣式設定

.inline
.less-box
}// 同等於
.inline, .less-box p:nth-child(5)

屬性聚合

主要針對一些多值得屬性，比如：背景、動畫等。通過+表示逗號(,)、+_表示空格()追加。

.block-scale()

.less-box
}// 最終形成
.less-box p:nth-child(6)

less使用小結

一 關於變數 less中的變數要使用 宣告。變數的使用方式 1.作為普通的變數 比如 color red 使用的話就在css中 div2.作為選擇器或屬性名，要用 這種形式 比如有乙個div 定義乙個變數 mydiv width 200px 編譯後css為 width3.作為url 另外，less變...

less使用有感

今天第一次使用了之前學的less，感覺非常棒，寫的時候不斷讓我覺得花費精力去學習這貨是值得的 為什麼我們要使用less？在我們寫css的時候一般是沒有注意到層次結構的，哪怕我們刻意去劃分好乙個乙個頁面，寫到最後就會發現四處引用，亂成麵條一樣，每修改一處還怕別的地方也被改了 less就能解決這個問題，...

Less基本使用

因為css是標記語言，無法定義變數 進行計算等，會有很多冗餘 而less scss等正是改變了這一缺點。less是一門css的擴充套件語言，是css的預處理語言，他可以編寫樣式的同時使用變數 進行計算，減少冗餘 提高開發效率 定義變數基本格式為 變數名 變數值 使用的時候可以直接當成變數去使用 如 ...