Question

我在Less extend功能方面遇到了一些问题。在某些情况下它不起作用，我无法弄清楚为什么。有一段有问题的代码：

.page-header {
    .bar:extend(.fixedElement) { // it works
        ...
    }
    .menu:extend(.fixedElement) { // it works
        ...
    }
    // some other stuff
    .menu-list {
        ...
        .btnStyle {
            padding: 18px 20px;
            min-height: 60px;
            width: 100%;
            display: block;
            border-bottom: 1px solid @light2;
        }
        .linkStyle:extend(.btnStyle) { // doesn't work
            //.btnStyle;
            background-color: @light1;
            .remCalc(14);
            &:active {
                background-color: transparent;
            }
        }
        .chosen {
            background-color: transparent;
            &:after {
                color: @primaryColor;
            }
        }
        ...
        .level-2 {
            & > ul {
                a:extend(.linkStyle) { // doesn't work
                    //.linkStyle;
                }
            }
        }
        .level-3 {
            ...
            & > ul > li {
                .btn-menu {
                    &.shown:extend(.chosen) { // doesn't work
                        //.chosen;
                    }
                }
                & > a:extend(.linkStyle) { // doesn't work
                    //.linkStyle;
                }
            }
            .selected {
                .btn-menu:extend(.chosen) { // doesn't work
                    //.chosen;
                }
            }
        }
        .btn-menu:extend(.btnStyle) { // doesn't work
            //.btnStyle;
            ...
        }
    }
}

和

.gradientBg {
    background: rgb(200, 200, 200);
    background: -webkit-linear-gradient(295deg, rgb(200, 200, 200) 10%, rgb(255, 255, 255) 90%);
    background: -o-linear-gradient(295deg, rgb(200, 200, 200) 10%, rgb(255, 255, 255) 90%);
    background: linear-gradient(25deg, rgb(200, 200, 200) 10%, rgb(255, 255, 255) 90%);
    border: 1px solid @light2;
}

.gr-box, .btn-1 {
    &:extend(.gradientBg); //it works
}

由.fixedElement或.gradientBg扩展的元素通常会编译到CSS，但不包括.btnStyle，.linkStyle和.chosen的元素（它们不在CSS;现在它只适用于每次放置的mixins）。编译期间没有任何错误。

我使用带有Less Autocompile 1.1.9扩展名的Brackets 1.3。我做错了什么？

Answer 1

原因：

引用Less Website： ^{重点是我的}

默认情况下，扩展会查找选择器之间的完全匹配。选择器是否使用前导星是否重要。两个第n个表达式具有相同的含义并不重要，它们需要具有相同的形式才能匹配。唯一的例外是属性选择器中的引号，较少知道它们具有相同的含义并匹配它们。

以下方法可行，因为extend函数的参数与已定义的另一个选择器完全匹配。（注意：我删除了一些属性以保持简单。）

.gradientBg { background: rgb(200, 200, 200); }
.gr-box, .btn-1 { &:extend(.gradientBg); }

但是下面的代码不起作用，因为嵌套选择器的编译选择器路径为.parent .gradientBg，并且提供给extend函数的参数不完全匹配。

.parent{
  .gradientBg { background: rgb(200, 200, 200); }
}
.gr-box, .btn-1 { &:extend(.gradientBg); }

在上面的场景中，编译器甚至不会抛出错误，因为当没有匹配时它会无声地失败。

解决方案：

使用extend功能扩展嵌套选择器时，应提供完全匹配的选择器（完整选择器路径）（或）应使用all关键字。

以下内容可用于为extend函数提供完整匹配选择器路径。

.parent{
  .gradientBg { background: rgb(200, 200, 200); }
}
.gr-box, .btn-1 { &:extend(.parent .gradientBg); }

或者，根据您的需要，即使这样也行，因为使用了all关键字。

.parent{
  .gradientBg { background: rgb(200, 200, 200); }
}
.gr-box, .btn-1 { &:extend(.gradientBg all); }

但请注意输出选择器如何具有结构.parent .gr-box和.parent .btn-1。这是因为Less仅使用新选择器替换选择器的匹配部分。在.parent .gradientBg（原始选择器）中，匹配的部分（作为extend的参数提供）仅为.gradientBg，因此extend之后的输出选择器将为.parent .gr-box

以下是Less网站关于扩展“all”的内容： ^{重点是我的}

当你在extend参数中指定all关键字时，它会告诉Less将该选择器与另一个选择器的一部分相匹配。选择器将被复制，然后选择器的匹配部分将被替换为扩展，从而形成一个新的选择器。

使用all关键字时还应注意的另一件事是，Less会扩展具有匹配部分的所有选择器的属性。因此，例如，如果我们考虑以下Less代码。

.parent{ .gradientBg { background: rgb(200, 200, 200); } } .parent2{ .gradientBg{ color: red; } } .gr-box, .btn-1 { &:extend(.gradientBg all); }

输出如下，因为在.gradientBg和.parent中都使用.parent2选择器。

.parent .gradientBg, .parent .gr-box, .parent .btn-1 { background: #c8c8c8; } .parent2 .gradientBg, .parent2 .gr-box, .parent2 .btn-1 { color: red; }

扩展功能不适用于嵌套选择器

1 个答案:

原因：

解决方案：