Less學習筆記4 樣式混合

對於同乙個頁面元素：

在less檔案中設定box的寬度：

@test_width:300px;
.box

此時若還要給div這個元素加乙個border的樣式，

.border

原來是：

現在就可以：

.box

編譯以後的.box為：

.box

樣式混合帶引數

假設有乙個border需要在不同的樣式中需求不同

先寫乙個關於border的函式：

.border_function(@border_width)

在使用的時候，需要傳入乙個border的寬度

.test_border

less編譯後的結果為：

.test_border

注意：此時必須要傳入border_width，否則會報錯

樣式混合帶乙個預設值

先寫乙個關於border的函式：

.border_function_default(@border_width:20px)

在使用的時候，可以傳入乙個border_width或者不傳，

當不傳的時候，border_width預設就是20px；

.test_border_deafult

less編譯的結果為：

.test_border_deafult

當傳入引數的時候，border_width就根據這個傳入的值進行相應的改變

.test_border_deafult

less編譯的結果為：

.test_border_deafult

學習webpack4 基礎配置學習webpack4 html處理學習webpack4 樣式處理學習webpack4 es6語法轉化學習webpack4 第三方庫的使用學習webpack4 抽離公共部分持續中注意開始之前以下內容之前，需要配置一些webpack的基礎配置，傳送門學習w...