LESS CSS嵌套类

前端之家收集整理的这篇文章主要介绍了LESS CSS嵌套类前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用LESS来改进我的CSS,并试图在类中嵌套一个类。有一个相当复杂的层次结构,但由于某种原因,我的嵌套不工作。
我有这个:
.g {
    float: left;
    color: #323a13;
    .border(1px,#afc945);
    .gradient(#afc945,#c8da64);
    .common;
    span {
        .my-span;
        .border-dashed(1px,rgba(255,255,0.3));
    }
    .posted {
         .my-posted;
         span {
            border: none;
         }
    }
}

我不能得到.g.posted工作。它只是显示.g位。
如果我这样做很好:

.g {
    float: left;
    color: #323a13;
    .border(1px,0.3));
    }
}

.g.posted {
         .my-posted;
         span {
            border: none;
         }
    }

我想嵌套.posted在.g。有任何想法吗?

解决方法

LESS不工作这种方式。

.class1.class2 {} – 在同一个DOM节点上定义两个类,但是

.class1 {
    .class2 {}
}

定义嵌套节点。 .class2将仅在它是类class1的节点的子节点时应用。

我也困惑了这一点,我的结论是LESS需要一个这个关键字:)。

[编辑]

由于我已经downvote没有任何意见或理由,我觉得有义务对我感觉可能是downvote的原因作出反应。

&字符具有这个关键字的功能,实际上(在写答案的时候我不知道的东西)。可以写:

.class1 {
    &.class2 {}
}

并且生成的CSS将如下所示:

.class.class2 {}

为了记录,@grobitto是第一个发布这条信息。

猜你在找的CSS相关文章