Less ( Extend、Mixin )
这篇教学会介绍 Less Extend 扩展和 Mixins 混合里常用的功能，这两个功能属于比较进阶的应用，通常在架构较为复杂的 Less 文件中才会见到，只要运用得当，就能大幅精简复杂的 CSS 程序码。
快速导览：
Extend 扩展
Less 的 Extend 扩展功能写法很类似“虚拟类别”，写法是“:extend(指定的選擇器)”，可以将指定选择器到样式，扩展到其他的选择器上，但扩展需要符合下列规则：
:extend一定放在最后，例如a:hover:extend(.oxxo)。- 选择器和
:extend之间可以有空格，例如a:hover :extend(.oxxo)。- 单行选择器可以多次扩展，例如
a:hover:extend(.apple):extend(.oxxo)，但不支援&:extend(.apple)只能扩展一次。
下方的范例会将 .apple 和 h2 的样式扩展到其他选择器中。
/********** Less 寫法 **********/
h2 {font-size: 30px;}
.apple {color: red;}
.oxxo:extend(.apple) {}
.banana:extend(.apple):extend(h2) {background: gray;}
/********** 轉換成 CSS **********/
h2, .banana {font-size: 30px;}
.apple, .oxxo, .banana {color: red;}
.banana {background: gray;}
如果扩展的对象没有样式，则后方仍然需要加上 {} 大括号，或者也可透过 & 将扩展写在样式内部，但需要注意使用 & 无法多次扩展，下方会呈现两种扩展的写法：
/********** Less 寫法 **********/
h2 {font-size: 30px;}
.apple {color: red;}
.oxxo:extend(.apple) {}
.banana:extend(.apple):extend(h2) {background: gray;}
.xoox {
&:extend(h2);
}
.coconut {
&:extend(.apple); /* 使用 & 進行多次擴展需要撰寫多次 */
&:extend(h2);
}
/********** 轉換成 CSS **********/
h2, .banana, .xoox, .coconut {font-size: 30px;}
.apple, .oxxo, .banana, .coconut {color: red;}
.banana {background: gray;}
Extend 扩展使用 all、+ 或 +_
如果指定的选择器链接有额外的选择器，例如虚拟元素、虚拟类别或多重选择器，在 extend 后方加上 all，就能将这些链接的选择器扩展到新的选择器中，下方范例呈现有使用 all 和没有使用的差异。
/********** Less 寫法 **********/
.a {color: red;}
.a.a30 {font-size: 30px;}
.a div {background: gray;}
.a:hover {color: blue;}
.b:extend(.a){} /* 只會擴展 .a */
.c:extend(.a all){} /* 所有與 .a 相關的選擇器都會一並擴展 */
/********** 轉換成 CSS **********/
.a, .b, .c {color: red;}
.a.a30, .c.a30 {font-size: 30px;} /* 注意沒有 .b，因為沒有擴展 */
.a div, .c div {background: gray;} /* 注意沒有 .b，因為沒有擴展 */
.a:hover, .c:hover {color: blue;} /* 注意沒有 .b，因為沒有擴展 */
除了 all，Extend 也可以使用 + 或 +_ 符号将扩展的样式与“前一段”合并，两者差别在于 + 转换出来会有逗号，+_ 则没有逗号，用空白呈现，使用时合并与被合并的选择器后方要添加相同的符号。
/********** Less 寫法 **********/
.a {box-shadow+: inset 0 0 10px #555;}
.b {box-shadow+_: inset 0 0 10px #555;}
.apple {
.a();
box-shadow+: i0 0 20px black;
}
.oxxo {
.b();
box-shadow+_: i0 0 20px black;
}
/********** 轉換成 CSS **********/
.a {background: inset 0 0 10px #555;}
.b {background: inset 0 0 10px #555;}
.apple {background: inset 0 0 10px #555, i0 0 20px black;}
.oxxo {background: inset 0 0 10px #555 i0 0 20px black;}
Mixins 混合
Less 的 Mixins 混合用法有点类似 Less 变数，Mixins 的写法有两种，两种写法不能混用。
- 使用现有的选择器转，混合时可使用这个选择器的名称，例如
.a或加上小括号识别a.()。- 使用小括号产生“独立”样式，例如
.a()，使用时只能使用.a()。
下方范例呈现两种 Less Mixins 写法的差异：
/********** Less 寫法 **********/
/* 使用標準選擇器作為混合參考 */
.a, .c {
color: red;
font-size: 20px;
border: 1px solid #000;
}
/* 後方有 () 表示定義一組樣式，這組樣式轉換後不會出現在程式碼內 */
.b() {
color: red;
font-size: 20px;
border: 1px solid #000;
}
.apple {.a;} /* 使用 .a 混合 .a 樣式，也可以寫成 .a() */
.oxxo {.b();} /* 使用 .b() 混合 .b() 樣式 */
.coconut{.c;} /* 使用 .c 混合 .c 樣式，也可以寫成 .c() */
/********** 轉換成 CSS **********/
/* 轉換後裡面不會出現 .b */
.a, .c {
color: red;
font-size: 20px;
border: 1px solid #000;
}
.apple {
color: red;
font-size: 20px;
border: 1px solid #000;
}
.oxxo {
color: red;
font-size: 20px;
border: 1px solid #000;
}
.coconut {
color: red;
font-size: 20px;
border: 1px solid #000;
}
Mixins 的参考对象为“选择器”，因此在混合时必须撰写完整的选择器名称，不然就会混合失败，下方范例的 .oxxo 因为没有撰写完整选择器名称，就会无法混合。
/********** Less 寫法 **********/
.a {
.aaa {
color: red;
font-size: 20px;
border: 1px solid #000;
}
}
.apple {
.a .aaa(); /* 混合成功 */
}
.oxxo {
.aaa(); /* 混合失敗！！ */
}
Mixins 只混合特定样式
在进行混合的时候，基本上都会混合“全部”样式属性，但有时会希望只混合特定样式，这时可以使用 [] 独立撰写要混合的样式，就能单独混合特定样式。
/********** Less 寫法 **********/
.apple {
color: red;
font-size: 20px;
background: pink;
}
.oxxo {
color: .apple[color];
}
.banana {
color: .apple[color];
font-size: .apple[font-size];
}
/********** 轉換成 CSS **********/
.apple {
color: red;
font-size: 20px;
background: pink;
}
.oxxo {
color: red;
}
.banana {
color: red;
font-size: 20px;
}
Mixins 混合时使用 Less 变数
如果 Mixins 参考的选择器太长，也可以将 Less 变数设定为这组选择器，届时直接呼叫这个变数就可以进行混合动作。
/********** Less 寫法 **********/
.a .b .c .d {
color: red;
}
@oxxo: .a .b .c .d(); /* 設定變數 */
.apple {
@oxxo(); /* 呼叫變數 */
}
/********** 轉換成 CSS **********/
.a .b .c .d {color: red;}
.apple {color: red;}
Mixins 混合时使用 !important
撰写 CSS 有时会需要用到 !important ( 建议避免使用，参考“!important 对权重的影响”)，*如果在混合时使用 !important，则混合的所有样式都会添加 !important*。
/********** Less 寫法 **********/
.a {
color: red;
font-size: 20px;
border: 1px solid #000;
}
.apple {
.a!important; /* 加上!important */
}
.oxxo {
.a()!important; /* 加上!important */
}
/********** 轉換成 CSS **********/
.a {
color: red;
font-size: 20px;
border: 1px solid #000;
}
/* 混合的樣式全部都加上 !important */
.apple {
color: red !important;
font-size: 20px !important;
border: 1px solid #000 !important;
}
.oxxo {
color: red !important;
font-size: 20px !important;
border: 1px solid #000 !important;
}
Mixins 混合时使用参数
除了基本的混合功能，Less Mixins 也如同“函数”一样支援“参数”的传递，使用参数可以让简化重复的程序，让程序码更为精简，下方范例会使用 @size 参数取代样式相同但数值不同的内容。
/********** Less 寫法 **********/
.oxxo (@size) {
font-size: @size; /* 使用參數的方式定義樣式 */
}
.apple {
.oxxo(20px);
}
.banana {
.oxxo(30px);
}
/********** 轉換成 CSS **********/
.apple {font-size: 20px;} /* 將參數換成指定數值 */
.banana {font-size: 30px;} /* 將參數換成指定數值 */
Less Mixins 里只要使用逗号“,”分隔参数，就能撰写“多重参数”语法，此外，参数也如同 Less 变数一般可以设定“默认值”，如果没有赋予新的数值就会采用默认值，下方范例会使用具有默认值的多重参数，如果没有使用该参数，就会套用默认值。
/********** Less 寫法 **********/
.oxxo (@size: 14px, @color: red, @bg: black) {
font-size: @size;
color: @color;
background: @bg;
}
.apple {
.oxxo(@size: 30px); /* 只更換 @size，其他使用預設值 */
}
.banana {
.oxxo(@bg: blue); /* 只更換 @bg，其他使用預設值 */
}
.coconut {
.oxxo(@color: yellow, @bg: blue); /* 只更換 @color 和 @bg，其他使用預設值 */
}
/********** 轉換成 CSS **********/
.apple {
font-size: 30px;
color: red;
background: black;
}
.banana {
font-size: 14px;
color: red;
background: blue;
}
.coconut {
font-size: 14px;
color: yellow;
background: blue;
}
Mixins 混合时的特殊参数 @arguments
@arguments 是一个特殊的参数，表示“带入所有参数”，在具有多个参数的状况下非常好用。
/********** Less 寫法 **********/
.a(@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
}
.apple {
.a;
}
/********** 轉換成 CSS **********/
.apple {
box-shadow: 0 0 1px #000;
}
小结
Less Extend 扩展和 Mixins 混合可以做的事情比这篇教学所介绍的还要复杂，但绝大多数情境只需要使用这些常用技巧即可，至于一些进阶的功能，有时透过 JavaScript 处理或改善 HTML 架构，才是比较好的解决方式。
微信扫码关注
抖音扫码关注