Making a Sass mixin with optional arguments

前端 未结 13 1329
眼角桃花
眼角桃花 2020-12-22 16:31

I am writing a mixin like this:

@mixin box-shadow($top, $left, $blur, $color, $inset:\"\") {
    -webkit-box-shadow:          


        
13条回答
  •  自闭症患者
    2020-12-22 17:24

    A DRY'r Way of Doing It

    And, generally, a neat trick to remove the quotes.

    @mixin box-shadow($top, $left, $blur, $color, $inset:"") {
      -webkit-box-shadow: $top $left $blur $color #{$inset};
      -moz-box-shadow:    $top $left $blur $color #{$inset};
      box-shadow:         $top $left $blur $color #{$inset};
    }
    

    SASS Version 3+, you can use unquote():

    @mixin box-shadow($top, $left, $blur, $color, $inset:"") {
      -webkit-box-shadow: $top $left $blur $color unquote($inset);
      -moz-box-shadow:    $top $left $blur $color unquote($inset);
      box-shadow:         $top $left $blur $color unquote($inset);
    } 
    

    Picked this up over here: pass a list to a mixin as a single argument with SASS

提交回复
热议问题