Как правильно использовать + функцию кеша в Stylus

Question

Я пытаюсь создать mixin используя переменные и функцию кеша. Он отлично работает, за исключением одной проблемы. См. Пример кода ниже, а затем я объясню проблему.

Во-первых, здесь есть примесь (упрощенно по причинам пространства, но по сути это то, как он работает):

mixin($type = apples, 
    $color = blue, 
    $font-size = 12px, 
    $margin = 10px, 
    $padding = 20px, 
    $border-radius = 30px 
) 

if $type == apples 
    $color = red 

if $type == oranges 
    // code 
if $type == peas 
    // code 

+cache('color' + $color) 
    color $color  
+cache('font-size' + $font-size) 
    font-size $font-size 
+cache('margin' + $margin)  
    margin: $margin 
+cache('padding' + $padding)  
    padding: $padding 
+cache('border-radius' + $border-radius)  
    border-radius: $border-radius   


.one 
    mixin($font-size: 13px) 

.two 
    mixin($type: oranges) 


.three 
    mixin($type: peas) 

Это выводит следующий код:

.one { 
    color: #f00; 
} 
.one { 
    font-size: 13px; 
} 
.one, 
.two, 
.three { 
    margin: 10px; 
} 
.one, 
.two, 
.three { 
    padding: 20px; 
} 
.one, 
.two, 
.three { 
    border-radius: 30px; 
} 
.two, 
.three { 
    color: #00f; 
} 
.two, 
.three { 
    font-size: 12px; 
} 

Проблема с этот метод заключается в том, что селекторы излишне повторяются. Мы могли бы легко комбинировать классы один, два и три вместе для поля, заполнения и радиуса и классов два и три вместе для цвета и размера шрифта.

Так давайте попробуем еще один такт для + кэш:

+cache(
    'color' + $color, 
    'font-size' + $font-size, 
    'margin' + $margin, 
    'padding' + $padding, 
    'border-radius' + $border-radius 
    ) 
    color $color  
    font-size $font-size  
    margin: $margin 
    padding: $padding 
    border-radius: $border-radius 

Это выводит следующий код:

.one { 
    color: #f00; 
    font-size: 13px; 
    margin: 10px; 
    padding: 20px; 
    border-radius: 30px; 
} 
.two, 
.three { 
    color: #00f; 
    font-size: 12px; 
    margin: 10px; 
    padding: 20px; 
    border-radius: 30px; 
} 

Теперь мы излишне выводя свойства. маржа, отступы и пограничный радиус упоминаются дважды.

То, что я хочу, это метод, который произведет следующий результат:

.one, 
.two, 
.three { 
    margin: 10px; 
    padding: 20px; 
    border-radius: 30px; 
} 

.one { 
    color: #f00; 
    font-size: 13px 
} 

.two, 
    color: #00f; 
    font-size: 12px; 
} 

Answer 1

К сожалению, нет. Поскольку это стоит, это лучшее, что вы получите с +cache. Хотя, чтобы сделать вещи более читаемыми, вы можете использовать +cache(arguments), как я сделал рев.

mixin($type = apples, 
$color = blue, 
$font-size = 12px, 
$margin = 10px, 
$padding = 20px, 
$border-radius = 30px 
) 

    +cache(arguments) 

    if $type == apples 
     $color = red 
    if $type == oranges 
     // code 
    if $type == peas 
     // code 

    color $color 
    font-size $font-size 
    margin: $margin 
    padding: $padding 
    border-radius: $border-radius 

Answer 2

Помощник CSS должен делать то, что вы хотите. Например, cssnano уменьшает оригинал, многословный CSS вниз к следующему (я добавил пробелы для удобства чтения):

.one{ 
    color:red; 
    font-size:13px 
} 
.one,.three,.two{ 
    margin:10px; 
    padding:20px; 
    border-radius:30px 
} 
.three,.two{ 
    color:#00f; 
    font-size:12px 
} 

Here is the code in action.