ฉันกำลังเขียนมิกซ์อินอย่างนี้:

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

เมื่อเรียกสิ่งที่ฉันต้องการจริงๆก็คือถ้าไม่มีการส่ง$insetค่าใด ๆจะไม่มีสิ่งใดส่งออกแทนที่จะรวบรวมสิ่งนี้:

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

ฉันจะเขียนมิกซ์อินใหม่เพื่อที่ว่าถ้าไม่มีค่าของการ$insetส่งผ่านจะไม่มีอะไรออก

วิธีที่จะทำให้มันแห้ง

และโดยทั่วไปแล้วเคล็ดลับที่เรียบร้อยในการลบเครื่องหมายคำพูด

@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 เวอร์ชัน 3+ คุณสามารถใช้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);
} 

เลือกสิ่งนี้ที่นี่: ส่งรายการไปยังมิกซ์อินเป็นอาร์กิวเมนต์เดี่ยวกับ SASS

วิธีที่ดีกว่าแห้งมาก

คือการส่งผ่านไปยัง$args... @mixinด้วยวิธีนี้ไม่ว่า$argsคุณจะผ่านไปกี่คน ในการ@inputโทรคุณสามารถผ่าน args ทั้งหมดที่จำเป็น ชอบมาก

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

และตอนนี้คุณสามารถนำ box-shadow กลับมาใช้ใหม่ได้ในทุกชั้นเรียนที่คุณต้องการโดยผ่าน args ที่จำเป็นทั้งหมด:

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

Sass รองรับ@ifงบ (ดูเอกสารประกอบ )

คุณสามารถเขียนมิกซ์อินของคุณเช่นนี้:

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

คุณสามารถใส่คุณสมบัติเป็นโมฆะเป็นค่าเริ่มต้นและถ้าคุณไม่ผ่านพารามิเตอร์มันจะไม่ถูกตีความ

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

หมายความว่าคุณสามารถเขียนคำสั่ง include เช่นนี้

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

แทนที่จะเขียนแบบนี้

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

ดังที่แสดงในคำตอบ ที่นี่

คำถามเก่าฉันรู้ แต่ฉันคิดว่านี่ยังเกี่ยวข้อง วิธีที่ชัดเจนในการทำเช่นนี้คือการใช้ฟังก์ชัน unquote () (ซึ่ง SASS มีมาตั้งแต่รุ่น 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);
}

นี่เทียบเท่ากับคำตอบของ Josh แต่ฉันคิดว่าฟังก์ชั่นที่ตั้งชื่ออย่างชัดเจนนั้นมีความสับสนน้อยกว่าไวยากรณ์การแก้ไขสตริง

ฉันรู้ว่ามันไม่ใช่คำตอบที่คุณต้องการ แต่คุณสามารถผ่าน"null"เป็นอาร์กิวเมนต์สุดท้ายเมื่อ@include box-shadowmixin เช่นนี้@include box-shadow(12px, 14px, 2px, green, null);หากอาร์กิวเมนต์นั้นเป็นเพียงหนึ่งในคุณสมบัตินั้นกว่าคุณสมบัตินั้น (และค่า (ค่าเริ่มต้น) จะไม่ถูกรวบรวม . หากมีสองหรือมากกว่า args ใน "บรรทัด" นั้นเท่านั้นที่คุณโมฆะจะไม่ได้รับการรวบรวม (กรณีของคุณ)

เอาท์พุท CSS ตรงตามที่คุณต้องการ แต่คุณต้องเขียน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;

นี่คือวิธีแก้ปัญหาที่ฉันใช้โดยมีหมายเหตุด้านล่าง:

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

• ต้องการผ่านค่าคุณสมบัติเป็น css ดั้งเดิมเพื่ออยู่ใกล้กับ "ลิ้น"
• อนุญาตให้ส่งผ่านจำนวนตัวแปรของข้อโต้แย้ง
• กำหนดค่าเริ่มต้นสำหรับความเกียจคร้าน

ด้วย sass@3.4.9:

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

และใช้โดยไม่มีค่าปุ่มจะเป็นสีน้ำเงิน

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

และด้วยค่าปุ่มจะเป็นสีแดง

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

ทำงานร่วมกับเฮกซ่าเกินไป

แม้แต่วิธีที่แห้ง!

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

และตอนนี้คุณสามารถนำกล่องเงากลับมาใช้ใหม่ได้อย่างชาญฉลาดยิ่งขึ้น:

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

วิธีที่ง่ายสุด ๆ

เพียงเพิ่มค่าเริ่มต้นnoneเป็น $ inset

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

ตอนนี้เมื่อไม่มีการแทรก $ $ จะไม่มีการแสดงผลใด ๆ

คุณสามารถกำหนด null ให้กับอาร์กิวเมนต์ที่เลือกระบุได้เสมอ นี่คือการแก้ไขง่ายๆ

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

ฉันใหม่สำหรับคอมไพเลอร์ css หวังว่านี่จะช่วยได้

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