less学习---less的混合(mixin)

上篇: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