나는 다음과 같이 mixin을 작성하고 있습니다.

@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에서 단일 인수로 목록을 믹스 인에 전달 하십시오.

훨씬 더 나은 DRY 방식

에 전달 $args...하는 것 @mixin입니다. 그렇게하면 얼마나 많은 사람들 $args이 통과 할 수 있습니다. 에서 @input전화, 당신은 필요한 모든 인수를 전달할 수 있습니다. 이렇게 :

@mixin box-shadow($args...) {
  -webkit-box-shadow: $args;
  -moz-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;
  }
}

속성을 기본값으로 null로 설정할 수 있으며 매개 변수를 전달하지 않으면 해석되지 않습니다.

@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"할 때 마지막 인수로 전달할 수 있습니다. . 해당 "라인"에 둘 이상의 인수가있는 경우 널 (NULL)로 설정 한 인수 만 컴파일되지 않습니다 (귀하의 경우).@include box-shadow@include box-shadow(12px, 14px, 2px, green, null);

CSS 출력은 정확히 원하는대로이지만 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;

다음은 메모와 함께 사용하는 솔루션입니다.

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

hexa 와도 작동합니다.

건조기까지!

@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) { ....

이제 $ inset이 전달되지 않으면 아무것도 표시되지 않습니다.

선택적 인수에 항상 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;
}