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