Продлить селектор замещающий в Stylus

Question

В Sass, я могу @extend%placeholder селекторы из любого места моего селекторы дерева, такие как:

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

Working on lib sass (v3.2.5)

Но в Стилус не, я могу @extend подобным образом , Я думаю, что это из-за различной природы селекторов-заполнителей Stylus.

Так как я могу сделать это DRY вещь в стилусом?

Пробовал заменить $ на ., и попытался двигаться &:hover поддерево, прежде чем .category-dropdown.

Answer 1

Вот возможное решение:

.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 { 
    a { 
     visibility: hidden 
     category-hovered-button() 
    } 
    } 
} 

компилируется в этом:

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

Это, вероятно, не то, что вы хотите, но это делает держать вещи DRY. Как вы сказали, поведение @extend от Stylus проще, чем у Sass's.

Строка 4 делает только замену .category с .category:hover, сохраняя при этом вещи на 100% сухим. Вот так:

• The selector() function вычисляет селектор тока, опционально с некоторыми дополнительными дополнительными селекторами.
• ^[1..-1] - специальный синтаксис разрезания, в данном случае опускающий первую часть селектора. (.category)
• The / prefix сообщает, что Stylus не должен префикс селектора любыми родительскими селекторами.
• {} выполняет интерполяцию.

С category-hovered-button является примесь, и вы, вероятно, не хотите, дублированные правила CSS, я включил кэширование с +cache()