web-dev-qa-db-ja.com

オプションの引数を使用してSassミックスインを作成する

私はこのようなミックスインを書いています：

@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の値が渡されない場合、何も出力されないように、ミックスインを書き換えるにはどうすればよいですか？

sass
184
Rich Bradshaw

乾いたやり方

そして、一般的に、引用符を削除するための巧妙なトリック

@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を使用して単一の引数としてリストをミックスインに渡します

240
Joshua Pinter

はるかに良い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);
}
72
Fabricio

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;
  }
}
45
Andrew Vit

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

答えに示されているように こちら

21
user1551211

古い質問ですが、これはまだ関係があると思います。おそらく、これを行うためのより明確な方法は、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の答えとほぼ同じですが、明示的に名前が付けられた関数は、文字列補間構文よりも難読化されていないと思います。

14
Bob Sammers

私はそれがあなたが探していた答えではないことを知っていますが、この@include box-shadow(12px, 14px, 2px, green, null);のように"null" mixinの最後の引数として@include box-shadowを渡すことができますコンパイルされます。その「行」に2つ以上の引数がある場合、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;
12
Drops

ここに私が使用する解決策があり、以下の注意事項があります：

@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として渡すことを好む
  • 可変数の引数を渡すことができます
  • 怠inessのデフォルト値を定義する
6
duggi

[email protected]の場合：

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

値なしで使用すると、ボタンは青になります

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

値がある場合、ボタンは赤になります

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

ヘキサでも動作します

3
gael

乾燥機でも！

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

超簡単な方法

noneのデフォルト値を$ insetに追加するだけです。

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

これで、$ insetが渡されない場合、何も表示されません。

1
fidev
@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;
    }
}
1
Adam C

私は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;
}
0
mike tracker

オプションの引数には常に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;
}
0
Benjamin