dimanche 5 juin 2016

Compile error when converting less to sass

Im very new to sass and less (and css in general) and need help converting some less to sass. I read this question but still not sure how to do it. This snippet from less to sass is failing to compile in sass; can you advise what the correct format should be. This is the error:

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

```




Aucun commentaire:

Enregistrer un commentaire