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