Less學習筆記 -- Mixins（混合）一

混合：

混合可以将一個定義好的classA輕松的引入到另一個classB中，進而簡單實作classB繼承classA中的所有屬性。任何CSS中的class或者id都可以引入

Less：

<code>.aWidth{</code><code>width</code><code>:</code><code>400px</code><code>;}</code>

<code>#aHeight{</code><code>height</code><code>:</code><code>600px</code><code>;}</code>

<code>p{</code>

<code>  </code><code>.aWidth;</code>

<code>  </code><code>#aHeight;</code>

<code>}</code>

CSS：

<code>.aWidth {</code>

<code>  </code><code>width</code><code>: </code><code>400px</code><code>;</code>

<code>#aHeight {</code>

<code>  </code><code>height</code><code>: </code><code>600px</code><code>;</code>

<code>p {</code>

帶選擇器的混合集：

混合集不僅可以包含各種屬性，而且可以包含各種選擇器

<code>.my-hover-mixin(){//加個空括号，不執行這段代碼的編譯</code>

<code>  </code><code>&amp;:hover{</code>

<code>    </code><code>border</code><code>:</code><code>1px</code> <code>solid</code> <code>#ddd</code><code>;</code>

<code>  </code><code>}</code>

<code>button{</code>

<code>  </code><code>.my-hover-mixin;</code>

<code>button:hover {</code>

<code>  </code><code>border</code><code>: </code><code>1px</code> <code>solid</code> <code>#ddd</code><code>;</code>

不輸出混合集：

如果你想建立一個混合集，但是卻不想讓它輸出到你的樣式中，你可以在混合集的名字後面加一個括号。這句話怎麼了解呢？對比以下兩段代碼：

代碼一：

<code>.my-mixin{</code>

<code>  </code><code>color</code><code>:</code><code>black</code><code>;</code>

<code>/*看這裡*/</code>

<code>.my-other-mixin{</code>

<code>  </code><code>background</code><code>:</code><code>white</code><code>;</code>

<code>.class{</code>

<code>  </code><code>.my-mixin;</code>

<code>  </code><code>/*看這裡*/</code>

<code>  </code><code>.my-other-mixin;</code>

<code>.my-mixin {</code>

<code>  </code><code>color</code><code>: </code><code>black</code><code>;</code>

<code>.my-other-mixin {</code>

<code>  </code><code>background</code><code>: </code><code>white</code><code>;</code>

<code>.class {</code>

代碼二：

<code>.my-other-mixin(){</code>

CSS：帶空括号的混合集并沒有編譯過來，但是可以編譯到另一個引用它的選擇器裡面

我們還可以帶參數的調用，就像使用函數一樣

<code>.filter(@blur){</code>

<code>  </code><code>-webkit-filter:blur(@blur);</code>

<code>  </code><code>-moz-filter:blur(@blur);</code>

<code>  </code><code>-ms-filter:blur(@blur);</code>

<code>  </code><code>filter:blur(@blur);</code>

<code>.border-radius(@radius:</code><code>5px</code><code>){</code>

<code>  </code><code>-webkit-border-radius: @radius;</code>

<code>  </code><code>-moz-border-radius: @radius;</code>

<code>  </code><code>border-radius: @radius;</code>

<code>#section{</code>

<code>  </code><code>.border-radius;</code>

<code>  </code><code>/*如果寫公共樣式的時候沒有設定具體的數值，引用的時候就必須設定，否則出不來效果*/</code>

<code>  </code><code>.filter(</code><code>5px</code><code>);</code>

<code>#footer{.border-radius(</code><code>10px</code><code>);}</code>

<code>#section {</code>

<code>  </code><code>-webkit-border-radius: </code><code>5px</code><code>;</code>

<code>  </code><code>-moz-border-radius: </code><code>5px</code><code>;</code>

<code>  </code><code>border-radius: </code><code>5px</code><code>;</code>

<code>  </code><code>-webkit-filter: blur(</code><code>5px</code><code>);</code>

<code>  </code><code>-moz-filter: blur(</code><code>5px</code><code>);</code>

<code>  </code><code>-ms-filter: blur(</code><code>5px</code><code>);</code>

<code>  </code><code>filter: blur(</code><code>5px</code><code>);</code>

<code>#footer {</code>

<code>  </code><code>-webkit-border-radius: </code><code>10px</code><code>;</code>

<code>  </code><code>-moz-border-radius: </code><code>10px</code><code>;</code>

<code>  </code><code>border-radius: </code><code>10px</code><code>;</code>

帶多個參數的混合

參數可以用逗号或分号分隔，但是推薦用分号分隔。

定義多個具有相同名稱和參數數量的mixins是合法的，less會使用它可以使用的屬性。如果使用mixin的時候隻帶一個參數，比如.mixin(red)，這個屬性會導緻所有的mixin都會強制使用這個明确的參數：

<code>.mixin(@color) {</code>

<code>  </code><code>color</code><code>-1:</code> <code>@color;</code>

<code>.mixin(@color; @</code><code>padding</code><code>: </code><code>2px</code><code>) {</code>

<code>  </code><code>color</code><code>-2:</code> <code>@color;</code>

<code>  </code><code>padding</code><code>-2:</code> <code>@padding;</code>

<code>.mixin(@color; @padding; @</code><code>margin</code><code>: </code><code>5px</code><code>) {</code>

<code>  </code><code>color</code><code>-3:</code> <code>@color;</code>

<code>  </code><code>padding</code><code>-3:</code> <code>@padding;</code>

<code>  </code><code>margin</code><code>: @margin @margin @margin @margin;</code>

<code>h</code><code>1</code><code>{</code>

<code>  </code><code>.mixin(</code><code>red</code><code>);</code>

<code>div{</code>

<code>  </code><code>.mixin(</code><code>green</code><code>;</code><code>4px</code><code>);</code>

<code>span{</code>

<code>  </code><code>.mixin(</code><code>blue</code><code>; </code><code>6px</code><code>; </code><code>8px</code><code>);</code>

<code>h</code><code>1</code> <code>{</code>

<code>  </code><code>color</code><code>-1:</code> <code>#ff0000</code><code>;</code>

<code>  </code><code>color</code><code>-2:</code> <code>#ff0000</code><code>;</code>

<code>  </code><code>padding</code><code>-2:</code> <code>2px</code><code>;</code>

<code>div {</code>

<code>  </code><code>color</code><code>-2:</code> <code>#008000</code><code>;</code>

<code>  </code><code>padding</code><code>-2:</code> <code>4px</code><code>;</code>

<code>  </code><code>color</code><code>-3:</code> <code>#008000</code><code>;</code>

<code>  </code><code>padding</code><code>-3:</code> <code>4px</code><code>;</code>

<code>  </code><code>margin</code><code>: </code><code>5px</code> <code>5px</code> <code>5px</code> <code>5px</code><code>;</code>

<code>span {</code>

<code>  </code><code>color</code><code>-3:</code> <code>#0000ff</code><code>;</code>

<code>  </code><code>padding</code><code>-3:</code> <code>6px</code><code>;</code>

<code>  </code><code>margin</code><code>: </code><code>8px</code> <code>8px</code> <code>8px</code> <code>8px</code><code>;</code>

命名參數

引用mixin時可以通過參數名稱而不是參數的位置來為mixin提供參數值，任何參數都通過它的名稱來引用，而不是特定的順序

<code>.mixin(@</code><code>color</code><code>:</code><code>blue</code><code>; @</code><code>padding</code><code>:</code><code>10px</code><code>; @</code><code>margin</code><code>:</code><code>15px</code><code>;){</code>

<code>  </code><code>color</code><code>:@color;</code>

<code>  </code><code>padding</code><code>:@padding;</code>

<code>  </code><code>margin</code><code>:@margin;</code>

<code>.class</code><code>1</code><code>{</code>

<code>  </code><code>.mixin(@</code><code>margin</code><code>:</code><code>20px</code><code>; @</code><code>color</code><code>:</code><code>#e4393c</code><code>;)</code>

<code>.class</code><code>2</code><code>{</code>

<code>  </code><code>.mixin(</code><code>#bf6da5</code><code>; </code><code>60px</code><code>;)</code>

<code>.class</code><code>1</code> <code>{</code>

<code>  </code><code>color</code><code>: </code><code>#e4393c</code><code>;</code>

<code>  </code><code>padding</code><code>: </code><code>10px</code><code>;</code>

<code>  </code><code>margin</code><code>: </code><code>20px</code><code>;</code>

<code>.class</code><code>2</code> <code>{</code>

<code>  </code><code>color</code><code>: </code><code>#bf6da5</code><code>;</code>

<code>  </code><code>padding</code><code>: </code><code>60px</code><code>;</code>

<code>  </code><code>margin</code><code>: </code><code>15px</code><code>;</code>

@arguments變量

arguments在Javascript中代表所有的參數，在這裡也是同樣的意思，隻不過用法稍有差別。如果你不想單個單個的處理參數，這一特性是很有用的：

<code>.box-shadow(@x:</code><code>0</code><code>; @y:</code><code>0</code><code>; @blur:</code><code>1px</code><code>; @</code><code>color</code><code>:</code><code>#000</code><code>;){</code>

<code>  </code><code>-webkit-box-shadow: @arguments;</code>

<code>  </code><code>-moz-box-shadow: @arguments;</code>

<code>  </code><code>box-shadow: @arguments;</code>

<code>.big-</code><code>block</code><code>{</code>

<code>  </code><code>.box-shadow(</code><code>2px</code><code>; </code><code>5px</code><code>;)</code>

<code>.big-</code><code>block</code> <code>{</code>

<code>  </code><code>-webkit-box-shadow: </code><code>2px</code> <code>5px</code> <code>1px</code> <code>#000000</code><code>;</code>

<code>  </code><code>-moz-box-shadow: </code><code>2px</code> <code>5px</code> <code>1px</code> <code>#000000</code><code>;</code>

<code>  </code><code>box-shadow: </code><code>2px</code> <code>5px</code> <code>1px</code> <code>#000000</code><code>;</code>

!important關鍵字

在調用的混合集後面追加!important關鍵字，可以使混合集裡面所有的屬性都繼承!important

<code>.foo(@bg:</code><code>#f00</code><code>, @</code><code>color</code><code>:</code><code>#666</code><code>){</code>

<code>  </code><code>background</code><code>:@bg;</code>

<code>.unimportant{</code>

<code>  </code><code>.foo;</code>

<code>.important{</code>

<code>  </code><code>.foo </code><code>!important</code><code>;</code>

<code>.unimportant {</code>

<code>  </code><code>background</code><code>: </code><code>#ff0000</code><code>;</code>

<code>  </code><code>color</code><code>: </code><code>#666666</code><code>;</code>

<code>.important {</code>

<code>  </code><code>background</code><code>: </code><code>#ff0000</code> <code>!important</code><code>;</code>

<code>  </code><code>color</code><code>: </code><code>#666666</code> <code>!important</code><code>;</code>

在這裡，也可以體驗一把Less在實際開發中關于提高代碼維護，給我們帶來的魅力

示例一

<code>@pink:</code><code>#f0f</code><code>;</code>

<code>#header{</code>

<code>  </code><code>h</code><code>2</code><code>{</code>

<code>    </code><code>font-size</code><code>:</code><code>26px</code><code>;</code>

<code>    </code><code>font-weight</code><code>:</code><code>bold</code><code>;</code>

<code>  </code><code>.sub_title{</code>

<code>    </code><code>color</code><code>:@pink;</code>

<code>  </code><code>.study_list{</code>

<code>    </code><code>color</code><code>:@pink+</code><code>111</code><code>;</code>

<code>  </code><code>p{</code>

<code>    </code><code>font-size</code><code>:</code><code>12px</code><code>;</code>

<code>    </code><code>a{</code>

<code>      </code><code>text-decoration</code><code>: </code><code>none</code><code>;</code>

<code>      </code><code>&amp;:hover{</code>

<code>        </code><code>border-width</code><code>:</code><code>1px</code><code>;</code>

<code>        </code><code>color</code><code>:@pink+</code><code>666</code><code>;</code>

<code>      </code><code>}</code>

<code>    </code><code>}</code>

<code>#header h</code><code>2</code> <code>{</code>

<code>  </code><code>font-size</code><code>: </code><code>26px</code><code>;</code>

<code>  </code><code>font-weight</code><code>: </code><code>bold</code><code>;</code>

<code>#header .sub_title {</code>

<code>  </code><code>color</code><code>: </code><code>#ff00ff</code><code>;</code>

<code>#header .study_list {</code>

<code>  </code><code>color</code><code>: </code><code>#ff6fff</code><code>;</code>

<code>#header p {</code>

<code>  </code><code>font-size</code><code>: </code><code>12px</code><code>;</code>

<code>#header p a {</code>

<code>  </code><code>text-decoration</code><code>: </code><code>none</code><code>;</code>

<code>#header p a:hover {</code>

<code>  </code><code>border-width</code><code>: </code><code>1px</code><code>;</code>

<code>  </code><code>color</code><code>: </code><code>#ffffff</code><code>;</code>

示例二

<code>@url:</code><code>"../images"</code><code>;</code>

<code>#loginForm{</code>

<code>  </code><code>width</code><code>:</code><code>80%</code><code>;</code>

<code>  </code><code>margin</code><code>:</code><code>0</code> <code>auto</code><code>;</code>

<code>  </code><code>ul{</code>

<code>    </code><code>li{</code>

<code>      </code><code>margin</code><code>:</code><code>15px</code> <code>0</code><code>;</code>

<code>      </code><code>&amp;:nth-child(</code><code>2</code><code>){</code>

<code>        </code><code>position</code><code>:</code><code>relative</code><code>;</code>

<code>      </code><code>label{</code>

<code>        </code><code>color</code><code>:</code><code>#d4d2d2</code><code>;</code>

<code>        </code><code>font-family</code><code>:</code><code>'Microsoft Yahei'</code><code>;</code>

<code>        </code><code>font-weight</code><code>:</code><code>bold</code><code>;</code>

<code>        </code><code>font-size</code><code>:</code><code>1.1em</code><code>;</code>

<code>  </code><code>.imgBground{</code>

<code>    </code><code>width</code><code>:</code><code>100%</code><code>;</code>

<code>    </code><code>height</code><code>:</code><code>28</code><code>vh;</code>

<code>    </code><code>filter:</code><code>url</code><code>(blur.svg#blur);</code>

<code>    </code><code>.filter(</code><code>5px</code><code>);</code>

<code>    </code><code>.border-radius(</code><code>10px</code><code>);</code>

<code>    </code><code>background</code><code>:</code><code>url</code><code>(</code><code>'@{url}/1.jpg'</code><code>);</code>

CSS:

<code>#loginForm {</code>

<code>  </code><code>width</code><code>: </code><code>80%</code><code>;</code>

<code>  </code><code>margin</code><code>: </code><code>0</code> <code>auto</code><code>;</code>

<code>#loginForm ul li {</code>

<code>  </code><code>margin</code><code>: </code><code>15px</code> <code>0</code><code>;</code>

<code>#loginForm ul li:nth-child(</code><code>2</code><code>) {</code>

<code>  </code><code>position</code><code>: </code><code>relative</code><code>;</code>

<code>#loginForm ul li label {</code>

<code>  </code><code>color</code><code>: </code><code>#d4d2d2</code><code>;</code>

<code>  </code><code>font-family</code><code>: </code><code>'Microsoft Yahei'</code><code>;</code>

<code>  </code><code>font-size</code><code>: </code><code>1.1em</code><code>;</code>

<code>#loginForm .imgBground {</code>

<code>  </code><code>width</code><code>: </code><code>100%</code><code>;</code>

<code>  </code><code>height</code><code>: </code><code>28</code><code>vh;</code>

<code>  </code><code>filter: </code><code>url</code><code>(blur.svg#blur);</code>

<code>  </code><code>background</code><code>: </code><code>url</code><code>(</code><code>'../images/1.jpg'</code><code>);</code>

詳情參考官方文檔：

<a href="http://www.css88.com/doc/less/features/#mixins-feature" target="_blank">http://www.css88.com/doc/less/features/#mixins-feature</a>

本文轉自   frwupeng517   51CTO部落格，原文連結:http://blog.51cto.com/dapengtalk/1862989