ekryski / less2sass

A little script to convert less to sass files
MIT License
273 stars 40 forks source link

Failing conversion #12

Closed Rex90 closed 7 years ago

Rex90 commented 8 years ago

Im very new to sass and less (and css in general). 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;
    }
}
lucasjahn commented 8 years ago

I think you should reformat the lines from this:

.open &.dropdown-toggle {

to this:

.open &.dropdown-toggle {

ekryski commented 7 years ago

Super old issue. Assuming this was resolved. Closing! 😄