0

Given a placeholder selector as

%theme
    .red
        :color red
        :background-color blue

    .yellow
        :color yellow
        :background-color green

I'd now like to go ahead and compile it to css such as

#content.special_page .red h2, #content.special_page .red .items li { ... }
#content.special_page .yellow h2, #content.special_page .yellow .items li { ... }

But this appears not to be possible ...

#content.special_page h2
    @extend %theme

... will render to ...

#content.special_page h2 .red { ... }
#content.special_page h2 .yellow { ... }

... and the placeholder selector does not allow me to pass any arguments or a content.

So are there any sass features to solve this, or even some tricky css selectors?

Taig
  • 6,718
  • 4
  • 44
  • 65
  • It is, however, how your problem is solved. – cimmanon Sep 30 '13 at 15:49
  • But both proposed solutions (mixin or the import technique) don't make use of SASS' elegant selector chaining when using `@extend`. So what I will end up with is repetitive CSS code and this is not what I'm looking for. Or am I overlooking something here? – Taig Sep 30 '13 at 16:27

1 Answers1

0

As I discovered while answering a similar question, the behaviour you're witnessing is apparently how @extend normally works.

Community
  • 1
  • 1
André Dion
  • 21,269
  • 7
  • 56
  • 60