2

在Less中，我可以写： 

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

.test {  
    .outer .inner;
}

但是当我写：

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

.test {  
    .outer-inner;
}

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

.outer-inner 未定义。

反正有没有重新使用的样式.outer-inner？

4

1 回答 1

2

Less 目前无法调用其选择器由串联形成的 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;
}

注意：正如 seven-phases-max 的评论中提到的，这个问题与这个项目类似。然而，这两个问题并不相同，extend对于插值选择器（动态形成）和连接选择器都不起作用。

选项 2：另一种选择是编写一个虚拟的 mixin或具有公共属性的单独的分离规则集，并像下面这样使用它。

@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;
}
于 2014-10-26T05:40:47.000 回答