Less 如何重用使用串联形成选择器的mixin

用更少的时间，我可以写：

.outer {  
    .inner {  
        color: red;  
    }  
}

.test {  
    .outer .inner;
}

但当我写作时：

.outer {  
    &-inner {  
        color: red;  
    }  
}

.test {  
    .outer-inner;
}

当我删除

.test

时，

.outer-inner

输出正确，但当我重新添加时，编译器会显示

.外部和内部未定义

---

是否仍然可以重复使用

.outer-internal

的样式？

调用选择器通过串联形成的mixin当前不可能使用更少的代码。但是，对于在编译时使用插值形成的选择器（也称为动态形成的选择器），也可以这样做

下面的（插值/动态形成的选择器）可以正常工作

@选择器：。框；
@{选择器}{
颜色：红色；
.孩子{
颜色：蓝色；
}
}
.演示{
.box；/*将同时创建父级和子级*/
}
.集装箱{
&盒{
背景：黑色；
}
}
D.演示2{
.集装箱箱；
}

然而，以下示例将不起作用

.container{
&-盒子{
颜色：蓝色；
}
}
D.演示2{
.集装箱箱；/*这不起作用*/
}

---

目前，解决方案之一是创建两个独立的较少文件

在第一个文件（test.less）中添加以下代码并将其编译成CSS文件

.outer{
&-内{
颜色：红色；
}  
}

在第二个文件中，使用

（less）

指令导入从第一个文件创建的CSS，然后调用/重用mixin

@import（less）“test.css”；
.test{
.外部和内部；
}

注意：如“最多七个阶段的评论”中所述，此问题类似于。但是，这两个问题与

extend

不相同，因为

无法同时使用插值选择器（动态形成）和串联选择器


选项2:另一个选项是编写具有公共属性的虚拟混合或单独的分离规则集，并使用它，如下所示

@dummy:{color:red}；//分离规则集
.外部{
&-内在的{
@dummy（）；
}
}
.测试{
@dummy（）；
}

或

.dummy（）{color:blue}；//虚拟mixin并不会在输出中产生额外的选择器，因为它有括号。
.外部{
&-内在的{
.假人；
}
}
.测试{
.假人；
}
类似项目-感谢您快速回答我。现在我已经清白了。投票赞成结案是重复的，虽然严格来说不是。“动态定义的选择器”是使用“选择器插值”（因此为“动态”）定义的选择器。使用
.a{&-b{
的选择器是“静态”的，所以对它们来说更严格的名称只是“串联”。总之：
extend
不能同时使用“动态”和“串联”选择器，相反，`mixin东西可以用于“动态”选择器，但不能用于“串联”选择器。