1

現在、ボックス シャドウのレイヤーを使用して 3D ボックス エフェクトを実行できる mixin を作成しています。

結果として返されるコードは次のようになります。

.someclass {
  box-shadow: 1px 0 1px #203891, 0 1px 1px #3852B1, 2px 1px 1px #203891,
  1px 2px 1px #3852B1, 3px 2px 1px #203891, 2px 3px 1px #3852B1;
}

このコードは、css-tricks のボタンから取得されます。

カンマ区切りでリストを追加/結合するのに助けが必要です:

次の 2 つのリストがあるとします。

$bottom: 1px 0 1px $bottomcolor
$right: 0 1px 1px $rightcolor

私は彼らに参加して以下を手に入れたいです:

$joined: 1px 0 1px $bottomcolor, 0 1px 1px $rightcolor

Sassの組み込みリスト関数を使用したときに得たものは次のとおりです。

append($bottom, $right, comma) => 1px, 0, 1px, red, 0 1px 1px red

join($bottom, $right, comma) => 1px, 0, 1px, red, 0, 1px, 1px, red
4

2 に答える 2

0

これも同様に機能します：

$cat: ();
$a: 1px 0px url(http://domain.com);
$b: 0px 1px #bbb;
$cat: append( unquote( $a ), $b, comma );

お役に立てれば。

于 2013-10-15T12:56:52.650 に答える
0

$bottom と $right は 2D リストではなく、1D リストのみであるため、上記のコードが機能しない理由がわかりました....

私は次のようにミックスインを解決することになりました：

@import compass

=boxeffect($depth, $bottomcolor, $rightcolor)

   $layers: 1px 0 1px $bottomcolor, 0 1px 1px $rightcolor

   @for $i from 1 through $depth
       $layers: append($layers, (#{$i + 1}px #{$i}px 1px $bottomcolor), comma)
       $layers: append($layers, (#{$i}px #{$i + 1}px 1px $rightcolor), comma)

   +box-shadow($layers)


.test
   +boxeffect(2, #222222, #333333)

結果は次のとおりです。

/* line 18, ../sass/temp.sass */
.test {
  -webkit-box-shadow: 1px 0 1px #222222, 0 1px 1px #333333, 2px 1px 1px #222222, 1px 2px 1px #333333, 3px 2px 1px #222222, 2px 3px 1px #333333;
  -moz-box-shadow: 1px 0 1px #222222, 0 1px 1px #333333, 2px 1px 1px #222222, 1px 2px 1px #333333, 3px 2px 1px #222222, 2px 3px 1px #333333;
  box-shadow: 1px 0 1px #222222, 0 1px 1px #333333, 2px 1px 1px #222222, 1px 2px 1px #333333, 3px 2px 1px #222222, 2px 3px 1px #333333;
}
于 2013-01-06T15:10:12.793 に答える