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

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

How to get the ip address of VM and use it to configure SSH connection dynamically in Ansible -

javascript - Get parameter of GET request -