CODEWITHSUNDEEP
inheritancenestedextendsstylus
Bogdan
Bogdan

Reputation: 85

how to extend nested inheritance in stylus

Well I have a block and I want my block's inherited nested elements to be extended.

.block 
    margin 40px 0
    text-align center

    &__support
        border 1px solid #ccc
        background white
        max-width 178px
        height 178px
        border-radius 100%
        margin-right 70px
    &__mobile
        @extends &__support

Meanwhile I do this like that @extends .block__support and it's OK. Maybe I'm wrong, but I saw somewhere this solution, but I don't remember how to apply?

Upvotes: 1

Views: 1394

Answers (1)

Panya
Panya

Reputation: 2699

You can save value of the parent selector (.block) to a variable using selector() function, and then use it inside @extend:

.block 
  margin 40px 0
  text-align center
  $parent = selector() // `.block`

  &__support
    border 1px solid #ccc
    background white
    max-width 178px
    height 178px
    border-radius 100%
    margin-right 70px
  &__mobile
    @extends {$parent}__support

Also you can use placeholder selectors.

Upvotes: 1

Related Questions