Css 将less转换为sass时发生编译错误

我对sass和less（以及一般的css）非常陌生，需要帮助将一些less转换为sass。我读了这个问题，但仍然不知道怎么做。从less到sass的这段代码未能在sass中编译；你能告诉我正确的格式是什么吗。这就是错误：

Error in plugin 'sass'
Message:
    app\styles\mixins.scss
Error: Invalid CSS after ".dropdown-toggle": expected "{", was "&"

       "&" may only be used at the beginning of a compound selector.
        on line 12 of app/styles/mixins.scss
>>      .open .dropdown-toggle& {

更少

.button-variant(@color; @background; @border) {
    color: @color;
    background-color: @background;
    border-color: @border;

    &:hover,
    &:focus,
    &:active,
    &.active,
    .open .dropdown-toggle& {
        color: @color;
        background-color: darken(@background, 10%);
        border-color: darken(@border, 12%);
    }
    &:active,
    &.active,
    .open .dropdown-toggle& {
        background-image: none;
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
            background-color: @background;
            border-color: @border;
        }
    }
}

@mixin button-variant($color, $background, $border) {
    color: $color;
    background-color: $background;
    border-color: $border;

    &:hover,
    &:focus,
    &:active,
    &.active,
    .open .dropdown-toggle& {
        color: $color;
        background-color: darken($background, 10%);
        border-color: darken($border, 12%);
    }
    &:active,
    &.active,
    .open .dropdown-toggle& {
        background-image: none;
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
            background-color: $background;
            border-color: $border;
        }
    }

    .badge {
        color: $background;
        background-color: $color;
    }
}

SASS

.button-variant(@color; @background; @border) {
    color: @color;
    background-color: @background;
    border-color: @border;

    &:hover,
    &:focus,
    &:active,
    &.active,
    .open .dropdown-toggle& {
        color: @color;
        background-color: darken(@background, 10%);
        border-color: darken(@border, 12%);
    }
    &:active,
    &.active,
    .open .dropdown-toggle& {
        background-image: none;
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
            background-color: @background;
            border-color: @border;
        }
    }
}

@mixin button-variant($color, $background, $border) {
    color: $color;
    background-color: $background;
    border-color: $border;

    &:hover,
    &:focus,
    &:active,
    &.active,
    .open .dropdown-toggle& {
        color: $color;
        background-color: darken($background, 10%);
        border-color: darken($border, 12%);
    }
    &:active,
    &.active,
    .open .dropdown-toggle& {
        background-image: none;
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
            background-color: $background;
            border-color: $border;
        }
    }

    .badge {
        color: $background;
        background-color: $color;
    }
}

---

Sass在没有空格的结尾追加父选择器（

&

）时（作为同一元素的另一个选择器）似乎有问题。当在末尾附加空格（即作为子元素的选择器）时，它可以工作

解决方案1:使用附加父选择器。请注意，这似乎仅在根目录下的

@用于组中的第一个选择器时才起作用

@at root.open.dropdown切换#{&}，
&：悬停，
&：焦点，
&：激活，
&.主动{
颜色：$color；
背景色：深色（背景色，10%）；
边框颜色：深色（边框，12%）；
}
@在root.open.dropdown切换#{&}，
&：激活，
&.主动{
背景图像：无；
}

解决方案2:在最后一个类选择器之前添加
&
。类选择器的顺序在CSS中并不重要，因此，除非父选择器实际上是多个元素的选择器链，否则更改不应该是一个问题。如果是/可能是这样，请参考第一个选项

&：悬停，
&：焦点，
&：激活，
&.主动，
.打开和.下拉切换{
颜色：$color；
背景色：深色（背景色，10%）；
边框颜色：深色（边框，12%）；
}
&：激活，
&.主动，
.打开和.下拉切换{
背景图像：无；
}
您可以使用此npm。安装并压缩此
像这样的简短答案通常更适合作为注释。您可以用一个简短的代码示例来支持您的回答。我希望有像@at root这样的东西可以提升一个级别