LESS：扩展先前定义的嵌套选择器 [英] LESS: Extend a previously defined nested selector

问题描述

我一直在试着像一个疯狂的人，得到以下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; 
} 
  

但是不幸的是它不会编译， strong>

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

解决方案

连接名称选择器（基本上， .top& -first& -item 被解释为三个不同的选择器元素，并且从

<$>

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

& -second {
background：green;
}

& -first，& -second {
& -item {
color：white;
}
}
}


I've been trying like a mad man to get the following LESS statement to work, but now i am fearing that it's not gonna happen :/ So I am turning now to you guys in the end for help!

I have the following statement:

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

I was hoping for to achive the following output:

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

But unfortunately it does not compile that but this instead:

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

解决方案

LESS currently does not support extending a "concatenated name" selectors (basically, .top &-first &-item is interpreted as three distinct selector elements and never found by extend looking for a single selector).

A workaround for your particular case:

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

    &-second {
        background: green;
    }

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

这篇关于LESS：扩展先前定义的嵌套选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！