mixins - How to Properly Use +cache function in Stylus -
i trying create mixin using variables , cache function. works fine, except 1 problem. see sample code below , i'll explain problem.
first, here mixin (simplified reasons of space, in essence how works):
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)
this outputs following code:
.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; }
the problem method selectors being unnecessarily repeated. combine classes one, 2 , 3 margin, padding , border-radius , classes 2 , 3 color , font-size.
so let's try tact +cache:
+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
this outputs following code:
.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; }
now unnecessarily outputting properties. margin, padding , border-radius each mentioned twice.
what want method produce following result:
.one, .two, .three { margin: 10px; padding: 20px; border-radius: 30px; } .one { color: #f00; font-size: 13px } .two, color: #00f; font-size: 12px; }
unfortunately, no. stands best +cache
. although, make things bit more readable can use +cache(arguments)
have done bellow.
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
Comments
Post a Comment