动态性的款式語言less英语的语法详解之混和特性

2021-01-20 08:05 jianzhan

前面详细介绍了less的自变量和extend英语的语法,今日在科学研究下混和特性(Mixin)。混和能够说是less的另外一个特点,你能够将通用性特性界定在1块,随后应用时立即启用此混和特性。

混和:
  在 LESS 中大家能够界定1些通用性的特性集为1个挑选器,随后在另外一个挑选器中去启用这些特性. 比如:


拷贝编码
编码以下:

.a, #b {
color: red;
}
.mixin-class {
.a();
}
.mixin-id {
#b();
}

编译程序后


拷贝编码
编码以下:

.a, #b {
color: red;
}
.mixin-class {
color: red;
}
.mixin-id {
color: red;
}

留意:在启用混和时,能够加括号还可以不加括号。下面这个也是对的:


拷贝编码
编码以下:

.a, #b {
color: red;
}
.mixin-class {
.a;
}
.mixin-id {
#b;
}

假如你只想界定1个混和,则能够再挑选器后边再加括号,以下:


拷贝编码
编码以下:

.my-mixin {
color: black;
}
.my-other-mixin() {
background: white;
}
.class {
.my-mixin;
.my-other-mixin;
}

编译程序后,加括号的.my-other-mixin()不容易被编译程序。


拷贝编码
编码以下:

.my-mixin {
color: black;
}
.class {
color: black;
background: white;
}

任何 CSS class, id 或 元素 特性集都可以以以一样的方法引进.通用性挑选器中能够嵌套循环挑选器。

取名室内空间:
  假如你想混和特性在1个更繁杂的挑选器,能够叠放好几个id或类。以下:


拷贝编码
编码以下:

#outer {
.inner {
color: red;
}
}

假如想应用这个混和特性,你能够这样,下面4个全是等额的的


拷贝编码
编码以下:

.c{
#outer > .inner;
}</p> <p>.c{
#outer > .inner();
}</p> <p>.c{
#outer.inner;
}</p> <p>.c{
#outer.inner();
}

你能够将混和特性界定在1个id的下面,这样就防止了与别的混和矛盾。

重要字!important:
  在应用混和特性后边再加!important重要字,则混和中的全部特性都会再加重要字!important。比如:


拷贝编码
编码以下:

.foo (@bg: #f5f5f5, @color: #900) {
background: @bg;
color: @color;
}
.unimportant {
.foo(1);
}
.important {
.foo(2) !important;
}

编译程序后


拷贝编码
编码以下:

.unimportant {
background: #f5f5f5;
color: #900;
}
.important {
background: #f5f5f5 !important;
color: #900 !important;
}

带主要参数的混和:
  混和特性还可以根据括号传送主要参数,以下:


拷贝编码
编码以下:

.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

大家只必须在应用它的情况下传送1个主要参数便可,以下:


拷贝编码
编码以下:

#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}

自然大家还可以给主要参数1个默认设置值,这样应用的情况下能够传值还可以不传值。以下:


拷贝编码
编码以下:

.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

假如大家沒有传值,则会应用默认设置值5px。

自然大家还可以传送好几个主要参数,以下:


拷贝编码
编码以下:

.mixin(@color) {
color⑴: @color;
}
.mixin(@color; @padding:2) {
color⑵: @color;
padding⑵: @padding;
}
.mixin(@color; @padding; @margin: 2) {
color⑶: @color;
padding⑶: @padding;
margin: @margin @margin @margin @margin;
}
.some .selector div {
.mixin(#008000);
}

编译程序后


拷贝编码
编码以下:

.some .selector div {
color⑴: #008000;
color⑵: #008000;
padding⑵: 2;
}

从编译程序的結果能够看出,less也是有涵数重载的特点。当大家界定同样混和特性名,主要参数不一样,随后.mixin(#008000);启用,第1和第2混和都能配对,可是第3个缺乏主要参数@padding的值,因此不容易引入第3个混和特性。

大家不但能够传好几个值,还能够特定特性名传值,以下:


拷贝编码
编码以下:

.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
.mixin(#efca44; @padding: 40px);
}

重要字@arguments:
  @arguments有独特的含意,相近于js的arguments,他包括了传送给混和特性的全部主要参数,以下:


拷贝编码
编码以下:

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
.big-block {
.box-shadow(2px; 5px);
}

编译程序后


拷贝编码
编码以下:

.big-block {
-webkit-box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
box-shadow: 2px 5px 1px #000;
}

重要字@reset:
  与@arguments不一样的是@reset包括除指明主要参数以外的主要参数,比如:


拷贝编码
编码以下:

.mixin(@a; @rest...) {
// @rest包括了@a以后的主要参数
// @arguments包括了全部主要参数
}

方式配对:
  有时你想让混和依据你传入的主要参数做不一样的事儿,例如:


拷贝编码
编码以下:

.mixin(dark; @color) {
color: darken(@color, 10%);
}
.mixin(light; @color) {
color: lighten(@color, 10%);
}
.mixin(@_; @color) {
display: block;
}
.class {
.mixin(@switch; #888);
}

针对.class你赋给自变量@switch不一样的值,不一样的混和特性会被启用,例如

@switch: light;

编译程序后


拷贝编码
编码以下:

.class {
color: #a2a2a2;
display: block;
}

做为涵数应用Mixin:
  当大家把混和作为涵数应用时,在启用涵数以后,涵数中的自变量是可使用的,除非启用混和特性的元素自身界定了一样的自变量。例如:


拷贝编码
编码以下:

.mixin() {
@width: 100%;
@height: 200px;
}
.caller {
.mixin();
width: @width;
height: @height;
}

编译程序后


拷贝编码
编码以下:

.caller {
width: 100%;
height: 200px;
}

应用表述式:


拷贝编码
编码以下:

.average(@x, @y) {
@average: ((@x + @y) / 2);
}
div {
.average(16px, 50px); // "call" the mixin
padding: @average; // use its "return" value
}

编译程序后


拷贝编码
编码以下:

div {
padding: 33px;
}

LESS VS SASS

同类架构也有 SASS : http://sass-lang.com/, 与 LESS 相比,二者都属于 CSS 预解决器,作用上大同市小异,全是应用相近程序流程式語言的方法撰写 CSS, 都具备自变量、混入、嵌套循环、承继等特点,最后目地全是便捷 CSS 的撰写及维护保养。