3

個人的には常にスタイラスを使用していますが、このプロジェクトでは使用できないので、次の質問があります。私はスタイラスでやっていることを、より少ないでどうやって行うことができますか? 問題は引数の数です。

スタイラスで:

box-shadow()
    -webkit-box-shadow arguments
    -moz-box-shadow arguments
    box-shadow arguments

.div {
    box-shadow 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.2), inset 0 -15px 30px rgba(0, 0, 0, 0.2)
}

.div2 {
    box-shadow 0 2px 8px rgba(0, 0, 0, 0.3)
}

出力:

.div {
  -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.2), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.2), inset 0 -15px 30px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.2), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.2), inset 0 -15px 30px rgba(0,0,0,0.2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.2), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.2), inset 0 -15px 30px rgba(0,0,0,0.2);
}
.div2 {
  -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
4

1 に答える 1

10

今は少ない

現在のバージョンの LESS では、コンマをリストの区切りとして使用し、パラメータの最後にセミコロンを 1 つ配置して、全体をコンマ区切りのリストとして渡すことができます。したがって、これは機能するようになりました (閉じ括弧の直前の最後の余分なセミコロンに注意してください。

.box-shadow(0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.2), inset 0 -15px 30px rgba(0, 0, 0, 0.2););
                                                                                                                                                                                                        ^here

オリジナル（LESS 1.3.3以前）の回答

同じ出力を得るために LESS を実行する必要がある方法は次のとおりです。

.box-shadow(@shadows) {
    -webkit-box-shadow: @shadows;
    -moz-box-shadow: @shadows;
    box-shadow: @shadows;
}

.div {
    .box-shadow(~"0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.2), inset 0 -15px 30px rgba(0, 0, 0, 0.2)");
}

.div2 {
    .box-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

注:として複数のシャドウを実行する.divには、エスケープ文字列を使用して単一の引数としてそれらを渡す必要があります。これが、最初の使用で~" "引数文字列全体を囲む理由です。影を 1 つだけ渡す場合は、その必要はありません。LESS は、シャドウ グループ間のコンマを取得するためにそれを必要とします。

于 2013-03-14T10:11:16.740 に答える