0

こんにちは世界 ：）

以下のコードのようなSASSを使用して、BOX-SHADOWプロパティのMIXINSを記述しようとしています。

@mixin simpleBoxShadow ($inset, $xoffset, $yoffset, $blur, $spread, $color ) {
    -webkit-box-shadow: $inset $xoffset $yoffset $blur $spread $color;
            box-shadow: $inset $xoffset $yoffset $blur $spread $color;
    ...
}

そして、私はINSET値にこだわっています。場合によっては INSET にする必要がありますが、無効にする場合もあります。この MIXIN を使用する場合、何を記述すればよいですか?

@include simpleBoxShadow ( -what's there?- , 10px, 10px, 10px, 10px, #000000 );

または、どうすれば別の方法でそれを行うことができますか?

4

1 に答える 1

0

これらのスペースで区切られた値は、SASS ではリストと見なされます。join()関数を使用して、リストを結合できます。したがって、1つのアプローチは次のようなことです。

@mixin simpleBoxShadow ( $xoffset, $yoffset, $blur, $spread, $color, $inset: false ) {
    $shadow: $xoffset $yoffset $blur $spread $color;

    @if ($inset) {
        $shadow: join(inset, $shadow, space);
    }

    -webkit-box-shadow: $shadow;
            box-shadow: $shadow;
}

次に、次のように mixin を使用できます。

// with inset
@include simpleBoxShadow( $inset: true, 10px, 10px, 10px, 10px, #000000 );
// without inset
@include simpleBoxShadow( 10px, 10px, 10px, 10px, #000000 );

更新: Compassの使用を検討することもできます。これは SASS の上に構築されたフレームワークであり、 box-shadow用のものを含む、多くの便利な関数と mixin を提供します。

于 2012-05-08T18:37:50.120 に答える