Is it possible to overload mixins in sass?

前端 未结 3 881
感动是毒
感动是毒 2021-02-04 00:59

Let say you have a mixin for shadow like such:

@mixin box-shadow($offset, $blur, $color)
{
   -moz-box-shadow: $offset $offset $blur $color;
   -webkit-box-shado         


        
相关标签:
3条回答
  • 2021-02-04 01:05

    You can't overload, but the typical practice would be to set defaults.

     /* this would take color as an arg, or fall back to #999 on a 2 arg call */
     @mixin box-shadow($offset, $blur, $color: #999) {
       -webkit-box-shadow: $offset $offset $blur $color;
       -moz-box-shadow: $offset $offset $blur $color;
       box-shadow: $offset $offset $blur $color;
     }
    
    0 讨论(0)
  • 2021-02-04 01:17

    @numbers1311407 solution is correct, but you can use the @each directive to create a shorter mixin:

    @mixin box-shadow($offset, $blur, $color: #999) {
      @each $prefix in -moz-, -webkit-, null {
        #{$prefix}box-shadow: $offset $offset $blur $color;
      }
    }
    
    0 讨论(0)
  • 2021-02-04 01:25

    If you need to tweak a vendor mixin slightly you can copy it to another file - included after the original - and edit it in there, and the vendor's original will be ignored.

    @import "_their-mixins";
    @import "_our-mixins";
    

    Warning - this may depend on which processor you are using. At time of writing it works great using grunt and grunt-contrib-compass

    0 讨论(0)
提交回复
热议问题