Search code examples
nestedrootextendstylus

How get root with Extend in stylus without mixin


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


Solution

  • 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;
    }