less学习---less的混合（mixin）

Posted 2020-12-11 kongbaifeiye

上篇：less的嵌套规则

本篇我们来讲述一下什么是混合（mixin）

混合简单的理解就是把一个css规则嵌入到另一个css规则中，那么这该怎么理解学习呢？我们先来看一下一个简单的混合

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

 从上面的例子我们可以发现什么？

.a和#b分别定义了一个css样式，然后将定义的样式套用到另一个类中，这就是混合了

我们可以将一些公共的样式先封装起来，然后在编写less的时候，遇到需要的直接混合进行，就万事大吉，省时省力了，哈哈

 

我们接下来看一下他的使用语法

实际上我们定义的任何一个css样式，就可以直接拿来混合使用了，那么怎么使用呢，上边的例子中就是类似函数一样，直接在一个css规则中，以.a()或者#b()写入进去就可以用了，基础语法就这么简单，当然实际上你的括号也可以不写的，也就是直接用.a或者#b也是可以通过的。

 

在进一步理解前，我们先来看一个在css定义的时候在选择器后边加上括号的情况。

如果我们在编译less的时候，我们不希望将调用的混合也一起编译出来，那我们可以在定义的时候，加上一个括号，这样我们在编译后就不会一起编译出来（节省了空间）

这个很简单，直接上例子看着理解下就好了。

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

 

混合有几个要点

首先是混合是可以包含选择器的。

我们在编写less的时候，出于方便肯定会使用嵌套规则，那么在如果把带有嵌套的类作为混合呢。他会把子级也一起编译出来吗？答案是会的。

放个例子大家细品一下，就很容易理解了

.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}
//编译后
button:hover{
　　border:1px solid red;
}

第二个要点便是命名空间

当然对于多层嵌套来说，我们可以在混合的时候，为了保证不会在编写的时候不会出现重复命名（在多人协作开发的时候就很有用了），因此less可以使用命名空间，对css规则进行分组，保证了混合的时候不会出现重名现象

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

.c {
  #outer > .inner;
}

 从上边例子中，我们了解到，#outer这个便是命名空间（所以命名空间就是#+名称），而我们在进行混合的时候，我们就使用了#outer  > .inner，就可以指定使用#outer下的.inner的css样式。

备注：在使用的时候，空格和>都是可选的，就是可有可无的。

所以以下的写法都是类似的

#outer > .inner;
#outer > .inner();
#outer .inner;
#outer .inner();
#outer.inner;
#outer.inner();

 

关于混合后面还有混合参数混合功能等，下期更新！！！

 

本文档学习源于less官方文档，附上官网链接：http://lesscss.cn/features/#mixins-feature