Question

在Less中，我可以写：

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

.test {  
    .outer .inner;
}

但是当我写道：

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

.test {  
    .outer-inner;
}

当我删除.test时，.outer-inner输出正确，但当我添加回来时，编译器说

.outer-inner未定义。

是否有重复使用.outer-inner的样式？

Answer 1

使用Less来调用一个mixin形成的mixin当前是不可能的。但是，对于使用插值在编译时形成的选择器也是可能的（也称为动态形成的选择器）。

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

@selector: .box;
@{selector}{
    color: red;
    .child{
        color:blue;
    }
}
.demo{
    .box; /* will create both parent & child */
}
.container{
    &.box{
        background: black;
    }
}
.demo2{
    .container.box;
}

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

.container{
    &-box{
        color: blue;
    }
}
.demo2{
    .container-box; /* this will not work */
}

目前，相关方案的一个解决方法是创建两个单独的Less文件。

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

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

在第二个文件中，使用(less)指令导入从第一个文件创建的CSS，然后调用/重新使用mixin。

@import (less) "test.css";
.test {  
    .outer-inner;
}

注意：正如七阶段最大评论中所述，此问题与this item类似。但是，这两个问题不一样，因为extend不适用于插值选择器（动态形成）和连接选择器。

选项2：另一种选择是使用常见属性编写虚拟混合或单独的分离规则集，并将其用作下方。

@dummy: {color: red}; // detached ruleset

.outer{
    &-inner{
        @dummy();
    }
}

.test{
    @dummy();
}

或

.dummy() {color: blue}; // dummy mixin and would produce no extra selector in output as it has parentheses.

.outer{
    &-inner{
        .dummy;
    }
}

.test{
    .dummy;
}

如何重用使用连接形成选择器的mixin

1 个答案: