0

I have BEM structure like this (but the question not about BEM):

.form-element  { //.form-element
    ...
    &__control { //.form-element__control
        ...
    }
    //now I want to have specific rule: textarea.form-element__control
    textarea& { // < here is an error

    }
    //it works like this:
    textarea & {

    }
}

I think, i'm missing something tiny, like a bracers, or something similar, if it's doable at all.

The question in the code comments :)

Kindzoku
  • 1,368
  • 1
  • 10
  • 29
  • LESS handles this particular feature better than Sass. – zzzzBov Sep 02 '16 at 16:56
  • Well, this particular feature is a way too small reason to move to Less. :) – Kindzoku Sep 03 '16 at 07:38
  • I absolutely agree, which is why I didn't tell you to switch to LESS. I just commented because it's worth noting, given that the syntax you used works as-is in LESS. – zzzzBov Sep 03 '16 at 14:38

1 Answers1

1

If you follow my example this will achieve what you are after.

Use the interpolation method #{ } and combine it with the @at-root function

@at-root textarea#{&} {
    display: none;
}

My example here

.contact-block {
    @at-root textarea#{&} {
        display: none;
    }
}

Compiles to

textarea.contact-block {
    display: none;
}

So this is what yours would look like

.form-element {
    &__control {
        @at-root textarea#{&} {
            display: none;
        }
    }
}

Compiling to

textarea.form-element__control {
    display: none;
}
zzzzBov
  • 174,988
  • 54
  • 320
  • 367
KINKWILDE
  • 136
  • 1
  • 15
  • I've edited my answer to illustrate what you are trying to achieve using your classes. – KINKWILDE Aug 18 '16 at 14:41
  • I just needed #{&} this voodoo! :) Never thought of using it that way :) Previously I only used it for dynamic class name building in mixins. – Kindzoku Aug 18 '16 at 14:42
  • Using just #{&} without the @at-root will compile something completely different – KINKWILDE Aug 18 '16 at 14:43