3

コードのチャンクを保存するために mixin をよく使用します。例えば：

   @mixin ui-spot-badges($ui-spot-badges: ui-spot-badges) {

    .#{$ui-spot-badges} {   
  position:relative; 
    @content;

    &:after {
    content:""; 
position:absolute;
background:red;
    }
    }

    }

    @include ui-spot-badges(myclass);

複数のクラスをミックスインに渡すにはどうすればよいですか。例えば

  @include ui-spot-badges(myclass, myclass2);

取得するため

.myclass, myclass2 {
  position:relative; 
}

.myclass:after, .myclass2:after {
    content:""; 
position:absolute;
background:red;
}
4

1 に答える 1

5

これを行う最も効率的な方法は、セレクターのリストを文字列として渡すことです。

@include ui-spot-badges('.myclass, .myclass2');

それ以外の場合は、セレクターを適切に生成するためにループを実行する必要があります。

@mixin ui-spot-badges($badges...) {
    $selectors: ();
    @each $b in $badges {
        $selectors: append($selectors, unquote('.#{$b}'), comma);
    }

    #{$selectors} {
        position:relative; 
        @content;

        &:after {
            content:""; 
            position:absolute;
            background:red;
        }
    }
}

@include ui-spot-badges(a, b);

出力：

.a, .b {
  position: relative;
}
.a:after, .b:after {
  content: "";
  position: absolute;
  background: red;
}
于 2013-05-09T21:03:39.587 に答える