将less转换为sass时编译错误答案

【问题标题】：Compile error when converting less to sass将less转换为sass时编译错误
【发布时间】：2016-10-05 02:02:22
【问题描述】：

我对 sass 和 less（以及一般的 css）非常陌生，需要帮助将一些 less 转换为 sass。我读了this 的问题，但仍然不知道该怎么做。这个从less到sass的sn-p无法在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;
        }
    }
}

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

【问题讨论】：

标签： css web sass less

【解决方案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;
}

【讨论】：

我希望有类似@at-root 的东西可以提升一级

【解决方案2】：

你可以使用这个 npm https://www.npmjs.com/package/less2sass。安装这个并压缩这个

【讨论】：

这样的简短答案通常更适合作为 cmets。您可以通过简短的代码示例来支持您的响应。