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;
}

LESS嵌套中的Mixins和classes

标签：

原文地址：http://www.cnblogs.com/kidsitcn/p/4914064.html