Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Modular CSS with Sass Sass and BEM BEM Mixins

Máté Végh
Máté Végh
25,607 Points
Posted by Máté Végh
Máté Végh
25,607 Points

Scout does not like BEM mixins?

I am using the Scout compiler and when I want to include BEM mixins, I get the following error message:

error bem_mixins.scss (Line 2: Invalid CSS after " &": expected "{", was "__#{$element} {"

"__#{$element" may only be used at the beginning of a selector.)

Here is my code:

@mixin e($element) {
  &__#{$element} {
    @content;
  }
}
@mixin m($modifier) {
  &--#{$modifier} {
    @content;
  }
}

.block {
  foo: bar;
  @include e(element) {
    bar: baz;
    @include m(modifier) {
      baz: foo;
    }
  }
}

I don't see any problem within my code. I also checked it on sassmeister.com and it worked. Has anyone else had the same issue?

1 Answer

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Matt,

You will need to use something else as Scout hasn't been updated in a very long time and contains an very old version of Sass, here are some alternatives.

  • Prepros Free and paid versions - Windows and OS X
  • CodeKit Paid software - OS X only
Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

Hey Chris,

Thanks for the information!