Css 扩展函数不'；不能使用嵌套选择器

我对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;
            ...
        }
    }
}

以及：

由

.fixedElement

或

.gradientBg

扩展的元素通常编译为CSS，但不是使用

.btnStyle

、

.linkStyle

和

.selected

的元素（它们不在CSS中；现在它只在每次放置混音时起作用）。编译期间没有任何错误

我使用括号1.3，自动编译1.1.9扩展更少。我做错了什么？

原因： 引用：重点是我的

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

由于

extend

函数的参数与已定义的另一个选择器完全匹配，因此以下操作将起作用。（注意：我删除了一些属性以保持简单。）

.gradientBg{背景：rgb（200200200200）；}
.gr框.btn-1{&:extend（.gradientBg）；}

但是下面的方法不起作用，因为嵌套选择器的编译选择器路径将是

.parent.gradientBg

，并且提供给

extend

函数的参数不完全匹配

.parent{
.gradientBg{背景：rgb（200200200200）；}
}
.gr框.btn-1{&:extend（.gradientBg）；}

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

---

解决方案： 使用

extend

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

all

关键字）

以下内容将作为

extend

功能的完整匹配选择器路径使用

.parent{
.gradientBg{背景：rgb（200200200200）；}
}
.gr框，.btn-1{&:extend（.parent.gradientBg）；}

或者，根据您的需要，即使这样也可以，因为使用了

all

关键字

.parent{
.gradientBg{背景：rgb（200200200200）；}
}
.gr框，.btn-1{&:extend（.gradientBg all）；}

---

但请注意，输出选择器的结构是

.parent.gr box

和

.parent.btn-1

。这是因为Less仅用新选择器替换选择器的匹配部分。在

.parent.gradientBg

（原始选择器）中，匹配的部分（作为参数提供给

扩展

）仅为

.gradientBg

，因此

扩展

后的输出选择器将为

.parent.gr框

以下是Less网站关于扩展“全部”的内容：重点是我的

当您在扩展参数中指定all关键字last时，它告诉Less将该选择器作为另一个选择器的一部分进行匹配。将复制选择器，然后仅将选择器的匹配部分替换为扩展部分，从而生成一个新的选择器

使用

all

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

.parent{
.gradientBg{背景：rgb（200200200200）；}
}
.父母2{
.gradientBg{颜色：红色；}
}
.gr框，.btn-1{&:extend（.gradientBg all）；}

输出如下所示，因为在

.parent

和

.parent2

中都使用了

.gradientBg

选择器

.parent.gradientBg、.parent.gr框、.parent.btn-1{
背景：#c8c8c8；
}
.parent2.gradientBg、.parent2.gr框、.parent2.btn-1{
颜色：红色；
}

要使extend正常工作，您需要完整地指定一个完全匹配的选择器（如

&:extend（.page header.menu list.btnStyle）

）。注意：我添加了一个详细的答案，因为我找不到此选项的确切副本。这不是一个完全的骗局，尽管名字可能暗示着这一点。现在它起作用了。谢谢：）@Harry，是的，我已经在考虑建议你写一个答案，因为目前还没有这样的答案（当然有些主题会涉及这个，但没有一个是专门的）。干得好！顺便说一句，目前（从v2.2.x左右开始），如果

extend

不匹配，编译器会发出警告（但您是否看到它取决于您用于编译的实际工具，此时除了

lessc

本身之外的大多数工具只会通知错误）。

.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
}