Question

我非常喜欢sass而且更少（和css一般）并且需要帮助将更少的东西转换为sass。我看过this问题，但仍然不知道该怎么做。从少到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& {

LESS

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

SASS

@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;
    }
}

Answer 1

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

解决方案1：使用@at-root directive附加父选择器。请注意，只有当@at-root用于组中的第一个选择器时，这似乎才有效。

@at-root .open .dropdown-toggle#{&},
&:hover,
&:focus,
&:active,
&.active {
    color: $color;
    background-color: darken($background, 10%);
    border-color: darken($border, 12%);
}
@at-root .open .dropdown-toggle#{&},
&:active,
&.active {
    background-image: none;
}

解决方案2：在最后一个类选择器之间添加&。类选择器的顺序在CSS中并不重要，因此除非父选择器实际上是多个元素链，否则更改不应成为问题。选择。如果是/可以是这种情况，那么请参考第一个选项。

&: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;
}

Answer 2

您可以使用此npm https://www.npmjs.com/package/less2sass。安装它并压缩此

将less转换为sass时编译错误

2 个答案: