css - Extend placeholder selector in Stylus -

in sass, can @extend %placeholder selectors place of selectors tree, such as:

.category {   .category-dropdown {     button {       visibility: hidden;       @extend %category-hovered-button;     }   }   &:hover {     %category-hovered-button {       visibility: visible;     }   } } 

working on lib sass (v3.2.5)

but in stylus, can't @extend similar way. i think it's because of different nature of stylus placeholder selectors.

so how can dry thing in stylus?

tried replace $ ., , tried move &:hover subtree before .category-dropdown.

here's possible solution:

.category {   $prefix = selector()   hovered() {       /{$prefix}:hover {selector('^[1..-1]')} {         {block}       }     }   }   category-hovered-button() {     +hovered() {       +cache() {         visibility: visible       }     }   }    .category-dropdown {     button {       visibility: hidden       category-hovered-button()     }   }   .category-other {     {       visibility: hidden       category-hovered-button()     }   } } 

compiles this:

.category .category-dropdown button {   visibility: hidden; } .category:hover .category-dropdown button, .category:hover .category-other {   visibility: visible; } .category .category-other {   visibility: hidden; } 

it's not want, does keep things dry. said, stylus's @extend behavior simpler sass's.

line 4 nothing more replace .category .category:hover, while keeping things 100% dry. here's how:

• the selector() function computes current selector, optionally additional appended selectors.
• ^[1..-1] special slicing syntax, in case omitting first part of selector. (.category)
• the / prefix tells stylus not prefix selector parent selectors.
• {} performs interpolation.

since category-hovered-button mixin, , don't want duplicated css rules, enabled caching +cache()