Less的简单使用（四）——Mixins的用法

Less的简单使用（四）——Mixins的用法

Mixins类似于编程语言中的函数。Mixins是一组css属性，可以将一个类的属性用于另一个类，并且包含类名作为其属性。在less中，可以使用类选择器或者id选择器以与css样式相同的方式声明mixin.mixin可以存储多个值，并且可以在必要的时候在代码中重复使用

一、在mixin中使用类选择器和id选择器

.less文件中的代码：

.a, #b {
    color: red;
}
.mixin-a {
    .a();//括号是可选的
}
.mixin-b {
    #b(); //括号是可选的
}

.css文件中对应的css代码：

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

二、不在css中输出mixin

当你要创建一个mixin,但是你又不希望mixin出现在css文件中，可以在mixin后面加个括号

.less文件中的代码：

// 不输出mixin
.mixin-one {
    font-size: 15px;
}
.mixin-two() {
    font-weight: 700;
}
#one-two {
    .mixin-one();
    .mixin-two();
}

.css文件中对应的css代码:

.mixin-one {
  font-size: 15px;
}
#one-two {
  font-size: 15px;
  font-weight: 700;
}

三、mixin中的选择器

mixin中不仅可以包含属性，还可以包含选择器

.less文件中的代码：

// mixin中的选择器
.mixin-three() {
    &:hover {
        border: 1px solid red;
    }
}
#button {
    .mixin-three();
}

.css文件中对应的css代码：

#button:hover {
  border: 1px solid red;
}

四、mixin命名空间

命名空间用于在通用名称下对mixin进行分组。使用命名空间可以避免名称冲突，并从外部封装mixin

.less文件中的代码

// 命名空间
#mixin-four() {
    .mixin-four-one() {
        color: lightsalmon;
    }
}
#light {
     #mixin-four > .mixin-four-one;//命名空间不可以带有括号
    // #mixin-four .mixin-four-one; 
    // #mixin-four.mixin-four-one;
}

注：引用时两个mixin之间的空格和 ">"都是可选的，看个人习惯写法

.css文件中对应的css代码：

#light {
  color: lightsalmon;
}

五、受保护的命名空间

当guard应用于命名空间时，只有在guard条件返回true时才使用由命名空间定义的mixin,受保护的命名空间的评估方式与mixin的guard方式完全相同

.less文件中的代码：

// 受保护的命名空间
#namespace() when (@color=green) {
    margin: 10px;
}
#namespace-one {
    .mixin-namespace when (@color=green){
        padding: 10px;;
    }
}
@color: green;

.css文件中的代码：

#namespace {
  margin: 10px;
}
#namespace-one .mixin-namespace {
  padding: 10px;
}

六、!important 关键字

!important关键字用于覆盖特定属性，当它在mixin调用之后放置时，它会将所有继承的属性标记为!important

.less文件中的代码：

// !important 关键字
.mixin-five() {
    color: lightseagreen;
    margin: auto;
}
#unimportant {
    .mixin-five();
}
#important {
    .mixin-five()!important;
}

.css文件中对应的css代码：

#unimportant {
  color: lightseagreen;
  margin: auto;
}
#important {
  color: lightseagreen !important;
  margin: auto !important;
}

七、mixin参数

mixin可以接受参数，参数是mixin传递到选择器的变量。mixin可以使用一个或者多个参数，通过参数和属性来扩展less的功能，以便在调用mixin时自定义mixin的输出

.less文件中的代码：

//mixin中的参数
.mixin-six(@color) {
    border-color: @color;
}
.mixin-six-one(@font-weight: 700){ //mixin可以具有参数的默认值
    font-weight: @font-weight;
}
#six {
    .mixin-six(skyblue); 
    .mixin-six-one();
}

.css文件中的css代码：

#six {
  border-color: skyblue;
  font-weight: 700;
}

八、具有多个参数的mixins

参数可以使用逗号或者分号分隔。使用逗号符号，可以将其解释为mixin参数分隔或者css列表分隔符。如果在mixin中使用了分号，那么分号则是参数分隔符，逗号则是css列表分隔符。注：当你使用了逗号作为mixin的分隔符时，则不可能创建以逗号分隔的列表作为参数，同时，如果在mixin调用或者声明中看到至少一个分号，则参数使用分号分隔，所有逗号都属于css列表

1）、两个参数：每一个包含逗号分隔的列表：.name(1,2,3;str1,str2);

2)、三个参数，并且每个包含一个数字：.name(1,2,3);

3)、使用分号创建mixin调用一个包含逗号分隔的css列表参数：.name(1,2,3;);

4)、逗号分隔的默认值：.name(@param1:red, blue;);

.less文件中的代码：

// 多个参数的mixin
.mixin-seven(@padding, @font) {
    padding: @padding;
    font: @font;
}
#mixin-seven-one {
    .mixin-seven(10px, 20px);//使用逗号作为mixin参数的分隔符
}
#mixin-seven-two {
    .mixin-seven(10px,20px; 10px,green);//使用分号作为mixin参数的分隔符
}

.css文件中的代码：

#mixin-seven-one {
  padding: 10px;
  font: 20px;
}
#mixin-seven-two {
  padding: 10px, 20px;
  font: 10px, green;
}

可以定义具有相同名称和数量参数的mixin，如果使用相同的mixin与一个相同参数，那么这个参数的属性将会传入到所有mixin中

.less文件中的代码：

.mixin-eight(@color) {
    color-1: @color;
}
.mixin-eight (@color; @padding:2px) {
    color-2: @color;
    padding-2: @padding;
}
.mixin-eight (@color; @padding; @float:left) {
    color-3: @color;
    padding-3: @padding;
    float: @float;
}
#mixin-eight { 
    .mixin-eight(green); //mixin名字和参数相同，则会被传入到相同的mixin中
}
#mixin-eight-one {
    .mixin-eight(red; 10px);
}

.css文件中对应的css代码：

#mixin-eight {
  color-1: green;
  color-2: green;
  padding-2: 2px;
}
#mixin-eight-one {
  color-2: red;
  padding-2: 10px;
  color-3: red;
  padding-3: 10px;
  float: left;
}

九、命名参数

mixin可以通过使用它们的名称提供参数而不是位置。参数没有放置值的任何顺序，它们可以通过名称引用，并切可以不必采用任何特殊顺序

.less文件中的代码：

// 命名参数
.mixin-nine (@color; @border; @margin) {
    border-color: @color;
    border: @border;
    margin: @margin;
}
#mixin-nine-one {
    .mixin-nine(@color:red; @margin: 10px; @border: 1px );
}
#mixin-nine-two {
    .mixin-nine(#645574, @border: 2px, 20px);
}

.css文件中对应的css代码：

#mixin-nine-one {
  border-color: red;
  border: 1px;
  margin: 10px;
}
#mixin-nine-two {
  border-color: #645574;
  border: 2px;
  margin: 20px;
}

十、@arguments variable

@arguments在mixin内部有特殊含义，当调用mixin时，@arguments包括所有传递的参数。当不想使用单个参数时，@argument参数将很有用

.less文件中的代码：

// @arguments 变量
.mixin-ten (@x; @y; @size; @color) {
    box-shadow: @arguments;
}
#mixin-ten {
    .mixin-ten(5px, 5px, 2px, red);
}

.css文件中对应的css代码：

#mixin-ten {
  box-shadow: 5px 5px 2px red;
}

十一、高级参数和@rest variable

mixin通过使用…提供可变数量的参数，可以通过在变量名称后面放置…为变量赋值参数

.less文件中的代码：

// 高级参数和@rest变量
.mixin-eleven (@color; @rest...) {
    color: @color;
    margin: @rest;
    padding: @rest;
}
#mixin-eleven {
    .mixin-eleven(red;10px;20px);
}

.css文件中的代码：

#mixin-eleven {
  color: red;
  margin: 10px 20px;
  padding: 10px 20px;
}

十二、模式匹配

可以通过向其传递参数来更改mixin的行为

.less文件中的代码：

// 模式匹配
.mixin-twelve (dark; @color: red) {
    color: @color;
} 
.mixin-twelve(light, @color: lightpink) {
    color: @color;
}
.mixin-twelve(@_) {
    display: inline;
}
#mixin-twelve {
    .mixin-twelve(@select);
}
@select: light;

.css文件中的代码：

#mixin-twelve {
  color: lightpink;
  display: inline;
}

如果@select的值为dark,则它会以 red 这个颜色显示结果，因为mixin定义与dark作为第一个参数匹配

• 第一个mixin定义不匹配，因为它应dark作为第一个参数。
• 第二个mixin定义匹配，因为它符合预期light。
• 第三个mixin定义匹配，因为它期望任何值。

十三、使用mixin作为函数

mixin和函数的工作方式非常相似。类似于函数，mixins可以嵌套，可以接受参数和返回值

.less文件中的代码：

//mixin函数
  .mixin-function(@x, @y) {
    @average: (@x+@y)/2;
  }
  #mixin-function {
      margin: .mixin-function(48, 12)[@average];   //.mixin-function(48, 12)[@average]是一个返回值，要赋给对应的属性
  }

.css文件中对应的css代码：

#mixin-function {
  margin: 30;
}

覆盖混合值：如果有多个匹配的mixin，则将评估所有mixin，并返回带有该标识符的最后一个匹配值，这类似于css中的层叠，它允许“覆盖”mixin值

.less文件中的代码：

//   覆盖mixin值
.cover() {
    .my() {
        prop: left;
    }
}
.cover() {
    .my() {
        prop: right;
    }
}
#cover {
    float: .cover.my()[prop];
}

.css文件中的css代码：

#cover {
  float: right;
}

未命名的查询：如果在调用mixin时没有指定查找的[@lookup]，而是直接在mixin或规则集调用之后写入[],则所有值将级联，最后一个声明的值将被选择

.less文件中的代码：

// 未命名的查询
.mixin-lookup(@x; @y) {
    @add: @x + @y;
    @multiply: @x * @y;
}
@lookup : {  //对于mixin调用规则集或者变量中，同样适用
    @num1: 10px;
    @num2: 20px;

}
#mixin-lookup {
    margin: .mixin-lookup(5px; 10px)[]; //不指定变量名，则匹配最后一个变量
    padding: @lookup[];
}

.css文件中的css代码：

#mixin-lookup {
  margin: 50px;
  padding: 20px;
}

将mixin和变量解锁到调用者作用域中：由变量和mixin组成的mixin可以在调用者的作用域中使用，并且是可见的。但是有一个例外，如果调用者包含具有相同名称的变量，那么该变量不会复制到调用者的作用域中。只有调用者范围内的变量被保护，并且继承的变量将被覆盖

.less文件中的代码：

// 在调用者作用域中直接定义的变量不能被覆盖。但是，在调用者父作用域中定义的变量不受保护，将被覆盖
.mixin() {
    @size: in-mixin;
    @definedOnlyInMixin: in-mixin;
  }
  .class {
    @definedOnlyInMixin: globaly-defined-value; 
    margin: @size @definedOnlyInMixin; //@definedOnlyInMixin被保护，继承的变量将会被覆盖
    .mixin();
  }
  @size: globaly-defined-value;

.css文件中的代码：

.class {
  margin: in-mixin globaly-defined-value;
}

每当一个mixin定义在另一个mixin中时，它也可以用作返回值

.less文件中的代码：

/   在mixin中定义的mixin充当返回值
.mixin-nine(@val) {
    .mixin-nine1() {
        declaration: @val;
    }
}
#nine {
    .mixin-nine(5);
    .mixin-nine1();
}

.css文件中的css代码：

#nine {
  declaration: 5;
}

十四、递归mixins

在less中，mixin可以与Guard表达式和模式匹配结合使用，可用于创建各种迭代或者循环结构

.less文件中的代码：

.for(@count) when (@count>0) {
    .for(@count - 1);
    height: @count * 10px;
    
}
#height {
    .for(3);
}

.css文件中的css代码：

#height {
  height: 10px;
  height: 20px;
  height: 30px;
}

使用递归循环生成css网格类：

.less文件中的代码：

.grid(@n, @i:1) when (@i <= @n) {
    #column-@{i} {
        height: @i * 100% / @n; 
 }
    .grid(@n, @i+1);
}
.grid(5);

.css文件中的代码：

#column-1 {
  height: 20%;
}
#column-2 {
  height: 40%;
}
#column-3 {
  height: 60%;
}
#column-4 {
  height: 80%;
}
#column-5 {
  height: 100%;
}

十五、Mixin Guards

如果你想在表达式上匹配简单的值或者参数数量，可以使用Guards。它与mixin声明相关联，并包括附加到mixin的条件。每个mixin将有一个或多个由逗号分隔的防护，并且guard必须包含在括号中。Less使用Guard的mixins而不是if/else语句，并执行计算以指定匹配的mixin，这与@media查询功能规范类似

.less文件中的代码：

// mixins守卫
.mixin-ten(@z) when (lightness(@z)>50%) {
    background-color: black;
}
.mixin-ten(@z) when (lightness(@z)<50%) {
    background-color: white;
}
.mixin-ten(@z) when (@z=@z) {
    color: @z;
}
.myClass-one {
    .mixin-ten(red);
}
.myClass-two {
    .mixin-ten(skyblue);
}

.css文件中的css代码：

.myClass-one {
  color: red;
}
.myClass-two {
  background-color: black;
  color: skyblue;
}

Guard比较运算符：less包含五个guard比较运算符：< , > , <= , >= 和 =。可以使用比较运算符（=)来比较数字，字符串，标识符等，而剩余的运算符只能与数字一起使用

.less文件中的代码：

.max(@num1, @num2) when (@num1 > @num2) {
    height: @num1;
}
.max(@num1, @num2) when (@num1 <@num2) {
    height: @num2;
}
#max {
    .max(5px, 10px);
}

.css文件中的css代码：

#max {
  height: 10px;
}

Guard逻辑运算符: 可以使用关键字来解决Guard逻辑运算符。可以使用和关键字组合使用保护条件，并且可以使用not关键字取消条件

.less文件中的代码：

//Guard逻辑运算符
.logic(@value) when (isnumber(@value)) and (@value>10) { //使用and来组合Guard
    padding: @value;
}
#logic {
    .logic(11px);
}
.logic-one(@value1) when (@value1<5) , (@value1>10) { //逗号模仿or运算符
    padding: @value1;
}
#logic-one {
    .logic-one(-5px);
}
.logic-two(@value2) when not (@value2>0) {  //not关键字否定条件
    padding: @value2;
}
#logic-two {
    .logic-two(-10px);
}

.css文件中的css代码：

#logic {
  padding: 11px;
}
#logic-one {
  padding: -5px;
}
#logic-two {
  padding: -10px;
}

类型检查函数：可以使用类型检查内置函数来确定匹配mixins的值类型。可以使用is函数，包括以下功能：

• iscolor

• isnumber

• isstring

• iskeyword

• isurl

如果要检查是否为数字并且是否使用特定单位，可以使用以下方法：

• ispixel

• ispercentage

• isem

• isunit

.less文件中的代码：

// 类型检查函数
.cheat(@number; @color) when (isnumber(@number)) {
    font-size: @number;
    color: @color;
}
#cheat {
    .cheat(13px, green);
}

.css文件中的css代码：

#cheat {
  font-size: 13px;
  color: green;
}

十六、Aliasing Mixins

将mixin调用分配给变量，即称为变量调用，也可以将其用于映射查找

.less文件中的代码：

//Aliasing Mixins 将mixinx分配给变量称为变量调用
#large.dark.light {
    .colors(dark) {
        primary: skyblue;
        secondary: lightgray;
    }
    .colors(light) {
        primary: purple;
        secondary: pink;
    }
}
#large {
    @color1: #large.dark.light.colors(light);
    @color2: #large.dark.light.colors(dark);
    color: @color1[secondary];
    background-color: @color2[primary];
}

.css文件中的css代码:

#large {
  color: pink;
  background-color: skyblue;
}

Variable calls:整个mixin可以被赋予别名，然后作为变量调用

.less文件中的代码：

//Variable calls 整个mixins可以被赋予别名并作为变量调用
#call {
    .mixin() {
        font-size: 15px;
    }
}
#alias {
    @alias: #call.mixin();
    @alias();
}

.css文件中的css代码：

#alias {
  font-size: 15px;
}

mixin赋予别名并作为选择器调用

.less文件中的代码：

#alias-one {
    @alias-one: #call.mixin;
    @{alias-one} {
        float: left;
    }
}

.css文件中的css代码：

#alias-one #call.mixin {
  float: left;
}