1

私はこのようにlesscss mixinを持っていbox-shadowます:

.box-shadow(@x, @y, @blur, @color, @addit: ''){
    -webkit-box-shadow: @x @y @blur @color @addit;
    -moz-box-shadow: @x @y @blur @color @addit;
    box-shadow: @x @y @blur @color @addit;
}

@additご覧のとおり、デフォルトとして設定されているパラメーターがあり''ます。

@addit: のような値を指定.box-shadow(0, 0, 2px, #1361aa, inset)すると問題なく動作しますが、@addit のパラメーターが入力されていないと動作しないのはなぜですか? そして、それを修正する方法は？

助けてください、事前に感謝します。

4

2 に答える 2

9

デフォルトとして空の文字列をエスケープします

~''エスケープされた文字列になるように、デフォルト値を に設定する必要があります。

以下

.box-shadow(@x, @y, @blur, @color, @addit: ~''){
    -webkit-box-shadow: @x @y @blur @color @addit;
    -moz-box-shadow: @x @y @blur @color @addit;
    box-shadow: @x @y @blur @color @addit;
}

.test{
   .box-shadow(0, 0, 2px, #1361aa)
}

CSS

.test {
  -webkit-box-shadow: 0 0 2px #1361aa ;
  -moz-box-shadow: 0 0 2px #1361aa ;
  box-shadow: 0 0 2px #1361aa ;
}
于 2013-07-22T12:30:46.467 に答える
2

''box-shadow に無効なパラメーターが追加されるため、使用できません。これは、生成された出力です.box-shadow(2px, 2px, 5px, #F00);

#myDiv {
  -webkit-box-shadow:2px 2px 5px #ff0000 '';
  -moz-box-shadow:2px 2px 5px #ff0000 '';
  box-shadow:2px 2px 5px #ff0000 '';
}

ご覧のとおり、LESS CSS は文字列と空の文字列をパラメーターとしてサポートしていますが、CSS はこれを認識せず、無効なスタイルとして破棄します。

これを行う 1 つの方法は、同じ名前でパラメーターの数が異なる 2 つの mixin を使用することです (オーバーロードに似ています)。

.box-shadow(@x, @y, @blur, @color) {
    -webkit-box-shadow: @x @y @blur @color;
    -moz-box-shadow: @x @y @blur @color;
    box-shadow: @x @y @blur @color;
}
.box-shadow(@x, @y, @blur, @color, @addit) {
    -webkit-box-shadow: @x @y @blur @color @addit;
    -moz-box-shadow: @x @y @blur @color @addit;
    box-shadow: @x @y @blur @color @addit;
}

これをテストし、以下で動作します:

.box-shadow(2px, 2px, 5px, #F00);
.box-shadow(2px, 2px, 5px, #F00, inset);
于 2013-07-22T04:11:23.290 に答える