Sass: Declarations may only be used within style rules

user_6854859 0
Viewed 4245

I am getting a sass error: Declarations may only be used within style rules.

   ╷
32 │     #{$property}: $value;
   │     ^^^^^^^^^^^^^^^^^^^^

for the following file:

@mixin theme($colour, $texture: null) {
  $theme: map-get-strict($themes, $colour, "theme");

  @if ($texture) {
    @include getTexture($texture);
  }

  @each $property, $value in $theme {
    #{$property}: $value;
  }
}

This is using dart-sass.

I think it might be a Sass test file that is causing the issue, e.g.:

@include it('outputs the light-blue theme') {
    @include assert {
      @include output {
        @include theme(light-blue);
      }

      @include expect {
        background-color: getColour(light-blue);
        color: getColour(black);
      }
    }
  }
sass
1 Answers

Declarations may only be used within style rules.

You can only use declarations within style rules. This means if you have a mixin which contains declarations

E.g.:

@mixin foo() {
  color: #000;
}

you can only include it within a style rule.

E.g.:

.bar {
  @include foo();
}

This helps to ensure that the compiled CSS is free of errors.

color: #000;

.bar {
  color: #000;
}
user_140368530
Related