css – LESS:扩展先前定义的嵌套选择器

前端之家收集整理的这篇文章主要介绍了css – LESS:扩展先前定义的嵌套选择器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在尝试像疯子一样让下面的LESS声明起作用,但现在我担心它不会发生:/所以我现在转向你们这些人最后寻求帮助!

我有以下声明:

.top{
    &-first{
        background:black;
        &-item{
            color:white;
        }
    }
    &-second{
        background:green;
        &-item:extend(.top-first-item){}
    }
}

我希望得到以下输出

.top-first {
    background: black;
}
.top-first-item,.top-second-item{
    color: white;
}
.top-second {
    background: green;
}

但不幸的是,它没有编译,但相反:

.top-first {
    background: black;
}
.top-first-item{
    color: white;
}
.top-second {
    background: green;
}

解决方法

LESS目前不支持扩展“连接名称”选择器(基本上,.top& -first& -item被解释为三个不同的选择器元素,并且从未通过扩展寻找单个选择器找到).

针对您的特定案例的解决方法

.top {
    &-first {
        background: black;
    }

    &-second {
        background: green;
    }

    &-first,&-second {
        &-item {
            color: white;
        }
    }
}

猜你在找的CSS相关文章