less學習 帶引數混合

2021-09-20 00:24:11 字數 878 閱讀 6885

在 less 中,你還可以像函式一樣定義乙個帶引數的屬性集合:

.border-radius (@radius)
然後在其他class中像這樣呼叫它:

#header 

.button

我們還可以像這樣給引數設定預設值:

.border-radius (@radius: 5px)
所以現在如果我們像這樣呼叫它的話:

#header
radius的值就會是5px.

你也可以定義不帶引數屬性集合,如果你想隱藏這個屬性集合,不讓它暴露到css中去,但是你還想在其他的屬性集合中引用,你會發現這個方法非常的好用:

.wrap () 

pre

輸出:

pre

@arguments 變數

@arguments包含了所有傳遞進來的引數. 如果你不想單獨處理每乙個引數的話就可以像這樣寫:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) 

.box-shadow(2px, 5px);

將會輸出:

box-shadow: 2px 5px 1px #000;

-moz

-box

-shadow: 2px 5px 1px #000;

-webkit

-box

-shadow: 2px 5px 1px #000;

個人部落格:付博瀚的個人部落格

less學習 混合

在 less 中我們可以定義一些通用的屬性集為乙個class,然後在另乙個class中去呼叫這些屬性.下面有這樣乙個class bordered 那如果我們現在需要在其他class中引入那些通用的屬性集,那麼我們只需要在任何class中像下面這樣呼叫就可以了 menu a post a.border...

less學習 less的混合(mixin)

上篇 less的巢狀規則 本篇我們來講述一下什麼是混合 mixin 混合簡單的理解就是把乙個css規則嵌入到另乙個css規則中,那麼這該怎麼理解學習呢?我們先來看一下乙個簡單的混合 a,b mixin class mixin id 編譯後 a,b mixin class mixin id 從上面的例...

Less學習 Mixin混合

在這裡我把他簡單的理解為類物件.bordered args非關鍵字引數 kwargs關鍵字引數 border top 1px dotted black border bottom 2px solid black 編譯後 在css檔案中輸出的mixin bordered 在css檔案中不輸出mixin...