Saya menulis mixin seperti ini:

@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;
}

Ketika dipanggil apa yang benar-benar saya inginkan adalah bahwa jika tidak ada $insetnilai yang diteruskan, tidak ada output, daripada kompilasi untuk sesuatu seperti ini:

-webkit-box-shadow: 2px 2px 5px #555555 "";
-moz-box-shadow: 2px 2px 5px #555555 "";
box-shadow: 2px 2px 5px #555555 "";

Bagaimana cara menulis ulang mixin sehingga jika tidak ada nilai $inset lewat, tidak ada output?

Cara KERING untuk Melakukannya

Dan, umumnya, trik rapi untuk menghapus tanda kutip.

@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 Versi 3+, Anda dapat menggunakan 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);
} 

Ambil ini di sini: sampaikan daftar ke mixin sebagai argumen tunggal dengan SASS

Cara KERING jauh lebih baik

adalah untuk lulus $args...ke @mixin. Dengan begitu, tidak peduli berapa banyak $argsyang akan Anda lewati. Dalam @inputpanggilan, Anda dapat melewati semua arg yang dibutuhkan. Seperti itu:

@mixin box-shadow($args...) {
  -webkit-box-shadow: $args;
  -moz-box-shadow: $args;
  box-shadow: $args;
}

Dan sekarang Anda dapat menggunakan kembali bayangan kotak Anda di setiap kelas yang Anda inginkan dengan melewati semua argumen yang dibutuhkan:

.my-box-shadow {
  @include box-shadow(2px 2px 5px #555, inset 0 0 0);
}

Sass mendukung @ifpernyataan. (Lihat dokumentasi .)

Anda dapat menulis mixin Anda seperti ini:

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

Anda dapat menempatkan properti dengan null sebagai nilai default dan jika Anda tidak melewati parameter itu tidak akan ditafsirkan.

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

Ini berarti Anda dapat menulis pernyataan sertakan seperti ini.

@include box-shadow($top, $left, $blur, $color);

Alih-alih menulisnya seperti ini.

@include box-shadow($top, $left, $blur, $color, null);

Seperti yang ditunjukkan pada jawaban di sini

Pertanyaan lama, saya tahu, tapi saya pikir ini masih relevan. Arguably, cara yang lebih jelas untuk melakukan ini adalah dengan menggunakan fungsi tanda kutip () (yang sudah dimiliki SASS sejak versi 3.0.0):

@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);
}

Ini kira-kira setara dengan jawaban Josh, tapi saya pikir fungsi yang disebutkan secara eksplisit kurang dikaburkan dari sintaks interpolasi string.

Saya tahu ini bukan jawaban yang Anda cari tetapi Anda bisa memberikan "null"argumen terakhir ketika @include box-shadowmixin, seperti ini@include box-shadow(12px, 14px, 2px, green, null); Sekarang, jika argumen itu hanya satu di properti itu daripada properti itu (dan nilai (default)) tidak akan dikompilasi . Jika ada dua atau lebih argumen tentang "baris" itu, hanya argumen yang Anda batalkan tidak akan dikompilasi (kasing Anda).

Output CSS persis seperti yang Anda inginkan, tetapi Anda harus menulis null:)

  @include box-shadow(12px, 14px, 2px, green, null);

  // compiles to ...

  -webkit-box-shadow: 12px 14px 2px green;  
  -moz-box-shadow: 12px 14px 2px green;  
  box-shadow: 12px 14px 2px green;

di sini adalah solusi yang saya gunakan, dengan catatan di bawah ini:

@mixin transition($trans...) {
  @if length($trans) < 1 {
    $trans: all .15s ease-out;
  }
  -moz-transition: $trans;
  -ms-transition: $trans;
  -webkit-transition: $trans;
  transition: $trans;
}

.use-this {
  @include transition;
}

.use-this-2 {
  @include transition(all 1s ease-out, color 2s ease-in);
}

• lebih suka melewati nilai properti sebagai css asli untuk tetap dekat dengan "lidah"
• memungkinkan lewat jumlah variabel argumen
• tentukan nilai standar untuk kemalasan

Dengan sass@3.4.9:

// declare
@mixin button( $bgcolor:blue ){
    background:$bgcolor;
}

dan gunakan tanpa nilai, tombol akan berwarna biru

//use
.my_button{
    @include button();
}

dan dengan nilai, tombol akan berwarna merah

//use
.my_button{
    @include button( red );
}

bekerja dengan hexa juga

Bahkan cara KERING!

@mixin box-shadow($args...) {
  @each $pre in -webkit-, -moz-, -ms-, -o- {
    #{$pre + box-shadow}: $args;
  } 
  #{box-shadow}: #{$args};
}

Dan sekarang Anda dapat menggunakan kembali bayangan kotak Anda lebih pintar:

.myShadow {
  @include box-shadow(2px 2px 5px #555, inset 0 0 0);
}

@mixin box-shadow($left: 0, $top: 0, $blur: 6px, $color: hsla(0,0%,0%,0.25), $inset: false) {
    @if $inset {
        -webkit-box-shadow: inset $left $top $blur $color;
        -moz-box-shadow: inset $left $top $blur $color;
        box-shadow: inset $left $top $blur $color;
    } @else {
        -webkit-box-shadow: $left $top $blur $color;
        -moz-box-shadow: $left $top $blur $color;
        box-shadow: $left $top $blur $color;
    }
}

Cara super sederhana

Tambahkan saja nilai default noneke $ inset - so

@mixin box-shadow($top, $left, $blur, $color, $inset: none) { ....

Sekarang ketika $ inset dilewatkan, tidak ada yang akan ditampilkan.

Anda selalu dapat menetapkan nol untuk argumen opsional Anda. Ini adalah perbaikan sederhana

@mixin box-shadow($top, $left, $blur, $color, $inset:null) { //assigning null to inset value makes it optional
    -webkit-box-shadow: $top $left $blur $color $inset;
    -moz-box-shadow: $top $left $blur $color $inset;
    box-shadow: $top $left $blur $color $inset;
}

Saya baru mengenal kompiler css, semoga ini membantu,

        @mixin positionStyle($params...){

            $temp:nth($params,1);
            @if $temp != null{
            position:$temp;
            }

             $temp:nth($params,2);
            @if $temp != null{
            top:$temp;
            }

             $temp:nth($params,3);
            @if $temp != null{
            right:$temp;
            }

             $temp:nth($params,4);
            @if $temp != null{
            bottom:$temp;
            }

            $temp:nth($params,5);
            @if $temp != null{
            left:$temp;
            }

    .someClass{
    @include positionStyle(absolute,30px,5px,null,null);
    }

//output

.someClass{
position:absolute;
 top: 30px;
 right: 5px;
}