Tôi đang viết một mixin như thế này:

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

Khi được gọi là điều tôi thực sự muốn là nếu không có $insetgiá trị nào được thông qua, không có gì là đầu ra, thay vì nó biên dịch thành thứ như thế này:

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

Làm cách nào để viết lại mixin để nếu không có giá trị nào $insetđược chuyển, không có gì là đầu ra?

Cách làm của DRY'r

Và, nói chung, một mẹo gọn gàng để loại bỏ các trích dẫn.

@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 Phiên bản 3+, bạn có thể sử dụng 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);
} 

Đã chọn cái này ở đây: chuyển một danh sách cho một mixin dưới dạng một đối số với SASS

Một cách tốt hơn rất nhiều

là phải vượt qua $args...đến @mixin. Bằng cách đó, cho dù $argsbạn sẽ vượt qua bao nhiêu . Trong @inputcuộc gọi, bạn có thể vượt qua tất cả các đối số cần thiết. Thích như vậy:

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

Và bây giờ bạn có thể sử dụng lại bóng hộp của mình trong mọi lớp bạn muốn bằng cách chuyển tất cả các đối số cần thiết:

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

Sass hỗ trợ @ifbáo cáo. (Xem tài liệu .)

Bạn có thể viết mixin của bạn như thế này:

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

Bạn có thể đặt thuộc tính bằng null làm giá trị mặc định và nếu bạn không vượt qua tham số thì nó sẽ không được giải thích.

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

Điều này có nghĩa là bạn có thể viết câu lệnh bao gồm như thế này.

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

Thay vì viết nó như thế này.

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

Như thể hiện trong câu trả lời ở đây

Câu hỏi cũ, tôi biết, nhưng tôi nghĩ rằng điều này vẫn còn có liên quan. Có thể cho rằng, một cách rõ ràng hơn để làm điều này là sử dụng hàm unquote () (mà SASS đã có từ phiên bản 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);
}

Điều này gần tương đương với câu trả lời của Josh, nhưng tôi nghĩ rằng hàm được đặt tên rõ ràng ít bị xáo trộn hơn cú pháp nội suy chuỗi.

Tôi biết đó không chính xác là câu trả lời mà bạn đang tìm kiếm nhưng bạn có thể vượt qua "null"như đối số cuối cùng khi @include box-shadowmixin, như thế này@include box-shadow(12px, 14px, 2px, green, null); Bây giờ, nếu đối số đó chỉ là một trong thuộc tính đó so với thuộc tính đó (và giá trị (mặc định) của nó) sẽ không được biên dịch . Nếu có hai hoặc nhiều đối số trên "dòng" đó, chỉ những đối số mà bạn đã hủy sẽ không được biên dịch (trường hợp của bạn).

Đầu ra CSS chính xác như bạn muốn, nhưng bạn phải viết nulls :)

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

Đây là giải pháp tôi sử dụng, với ghi chú bên dưới:

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

• thích chuyển các giá trị thuộc tính như css riêng để ở gần "lưỡi"
• cho phép chuyển số lượng đối số biến
• xác định một giá trị mặc định cho sự lười biếng

Với sass@3.4.9:

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

và sử dụng không có giá trị, nút sẽ có màu xanh

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

và với giá trị, nút sẽ có màu đỏ

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

cũng hoạt động với hexa

Ngay cả cách DRYer!

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

Và bây giờ bạn có thể sử dụng lại bóng hộp của mình thậm chí thông minh hơn:

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

Cách siêu đơn giản

Chỉ cần thêm một giá trị mặc định là none$ inset - vì vậy

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

Bây giờ khi không có $ inset nào được thông qua, sẽ không được hiển thị.

Bạn luôn có thể gán null cho các đối số tùy chọn của mình. Đây là một sửa chữa đơn giản

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

Tôi chưa quen với trình biên dịch css, hy vọng điều này sẽ giúp,

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