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

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 中；现在它只能在每次放置 mixin 时起作用）。编译过程中没有任何错误。

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

Answer 1

原因：

Quoting Less Website: ^{emphasis is mine}

Extend by default looks for exact match between selectors. It does matter whether selector uses leading star or not. It does not matter that two nth-expressions have the same meaning, they need to have to same form in order to be matched. The only exception are quotes in attribute selector, less knows they have the same meaning and matches them.

下面的代码会起作用，因为 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); }

Less 编译器 在上述场景中甚至不会抛出错误 因为当没有匹配时它会自动失败。

解决方案：

使用 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 .

Here is what the Less website says about extend "all": ^{emphasis is mine}

When you specify the all keyword last in an extend argument it tells Less to match that selector as part of another selector. The selector will be copied and the matched part of the selector only will then be replaced with the extend, making a new selector.

使用 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; }

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

Extend function doesn't work with nested selectors

css

extend

less

原因：

解决方案：