-1

I'm learn stylus and i need to get root-element properties for his sub-classes:

.daddy-element
    (this is a root)
    main: prop
    &.sublclass
        (need "main: prop" here)
        another: prop

in sass we have $root: &, what stylus can in this situation? @mixin — bad variant with biggest css-code and its not clear for reading

here is my sass code: Codepen

Eugene Balashov
  • 105
  • 1
  • 13
  • 1
    There is a problem to archieve that in stylus, @extend works different than in SASS or maybe is a bug (I don't know) and the child get the propieties of its parent but continue passing for the children and return the selectors twice. Sorry my English. Check this example: [stylus extend](http://stylus-lang.com/try.html#?code=.class%0A%20%20sel%20%3D%20unquote(selector())%0A%20%20margin-bottom%3A%201em%0A%20%20%26.ok%0A%20%20%20%20%40extend%20%7Bsel%7D%0A%20%20%20%20color%3A%20red) –  Jul 01 '16 at 21:05
  • we can clean it with gulp :D but it is a bad crunch. – Eugene Balashov Jul 04 '16 at 14:07
  • why u use unquote? `sel = selector()` — works too – Eugene Balashov Jul 04 '16 at 14:07
  • without `unquote()`, I get `'.class'` and `@extend '.class'` doesn't work for me, I have to remove the quotes –  Jul 04 '16 at 16:32

1 Answers1

1

I found a solution with placeholder selector, it isn't as clean as in SASS but is the best solution that I could achieve:

STYLUS

$placeholder
 margin-bottom: 1em

.class
  @extends $placeholder
  &.ok
     @extends $placeholder
     color: red

OUTPUT

.class,
.class.ok {
  margin-bottom: 1em;
}
.class.ok {
  color: #f00;
}