LESS嵌套中的Mixins和classes
less的嵌套规则对于有效组织你的css代码有较好的作用。其中使用mixin或者class都可以作为被嵌套的实体,但是二者还是有区别的:
- mixin必须由.name+(){}的pattern来定义,而class则只需.name{}来定义(注意:class依然可以通过.name直接在less源文件中引入该class的所有rule)
- mixin本身并不会在最终编译输出的css文件中以类出现,而class最终会以.name{}输出该class
.class-1{ property-1: a; } .class-2{ .class-1; property-2: b; }
上面的less代码最终将输出以下的css代码:
.class-1 { property-1: a; } .class-2 { property-1: a; property-2: b; }
再来看看下面的less代码:
.class-1-mixin(){ property-1: a; } .class-2{ .class-1-mixin(); property-2: b; }
上面这段代码由于.class-1-mixin只是一个mixin,被调用编译后并不输出.class-1-mixin这个class!!!
.class-2 { property-1: a; property-2: b; }
积小流以汇江海,细微做起