3

さまざまな新しいCSS3プロパティは、無限の値のセット、つまりbox-shadow背景のグラデーションを受け入れます。

例box-shadowとして、理想的には次のことができるはずです。

@include box-shadow(10px 15px 10px #FF0000, 15px 10px 10px #0000FF);

好きなだけパラメータ。問題は、Sassが決定的な数のパラメーターを要求することであり、そうでない場合でも、それらをループする手段がないことを私は知っています。

私がこれまでに考えることができる最高のミックスインは次のようになります：

@mixin box-shadow($v1: 0 0 10px #CCC, $v2: "", $v3: "", $v4: "", $v5: "") {
  @if $v5 != "" {
    -webkit-box-shadow: $v1, $v2, $v3, $v4, $v5;
    -moz-box-shadow: $v1, $v2, $v3, $v4, $v5;
    -o-box-shadow: $v1, $v2, $v3, $v4, $v5;
    box-shadow: $v1, $v2, $v3, $v4, $v5;
  } @else if $v4 != "" {
    ...
  } @else {
    -webkit-box-shadow: $v1;
    -moz-box-shadow: $v1;
    -o-box-shadow: $v1;
    box-shadow: $v1;
  }
}

私はSassベンダーケータリングCSS3ミックスインのセットを書き込もうとしています。（https://github.com/stevelacey/sass-css3-mixinsで入手できます）。

明らかに、これはゴミで、長く、5つのスタイルに制限されていますが、より良い方法はありますか？

編集：

@Riklomasは私にこれを指摘しました：https ：//gist.github.com/601806これは少なくとも私のコードよりも反復性が少なく、適切な解決策を探しています。

4

3 に答える 3

7

こんにちは私はSassCoreチームのメンバーです。将来的にはvar-args機能をsassに追加したいと思っていますが、現在はできません。

于 2011-05-31T22:54:55.257 に答える
3

SASS 3.2では、次のように機能するミックスインを使用できるようになりました。

@mixin box-shadow($values...){
    -webkit-box-shadow: $values;
    -moz-box-shadow: $values;
    box-shadow: $values;
}

ソース

于 2013-06-01T14:52:45.320 に答える
-3

要するに、違います。

しかし、私はもうこれを気にする必要はありません。コンパスは上記のようなものをかなりうまくまとめています。

于 2011-02-26T21:11:10.813 に答える