web-dev-qa-db-ja.com

LESS CSSで複数のボックスシャドウ値を作成する方法

これを読む

いくつかの「正しい」答えがあります。この質問は多くのトラフィックを得るので、私は何に追いつけるべきかを考えました（私は思う）最良の答えは（LESSドキュメントに基づく）LESSプロジェクトが成熟するにつれて、それに応じて私の受け入れられた回答を変更します。

LESSを使用していますが、複数のCSS3ボックスシャドウを許可するための修正を見つけることができませんでした。私は次のミックスインを持っています：

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

そして私はこれを試みています：

.box-shadow(
    inset 0 0 50px rgba(0,0,0,0.3),
    0 0 10px rgba(0,0,0,0.5);
);

これは通常のCSS3では機能しますが、LESSファイルから実行すると失敗します。 2つの影を区切るコンマがLESSパーサーで問題の原因となっていることをどこかで読んだことがあります。

誰もがこれを機能させる方法を知っていますか？考えられる唯一の回避策は、複数のボックスシャドウプロパティを含む追加のCSSファイルを作成することです。

cssless
41
Mike McLin

最良の解決策は、シャドウの数ごとに個別のオーバーロードを作成することです。 Lessは適切なオーバーロード解決を処理します：

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

.box-shadow(@shadow1, @shadow2) {
    -webkit-box-shadow: @shadow1, @shadow2;
    -moz-box-shadow: @shadow1, @shadow2;
    box-shadow: @shadow1, @shadow2;
}    

.box-shadow(@shadow1, @shadow2, @shadow3) {
    -webkit-box-shadow: @shadow1, @shadow2, @shadow3;
    -moz-box-shadow: @shadow1, @shadow2, @shadow3;
    box-shadow: @shadow1, @shadow2, @shadow3;
}

.box-shadow(@shadow1, @shadow2, @shadow3, @shadow4) {
    -webkit-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
    -moz-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
    box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
}

.box-shadow(@shadow1, @shadow2, @shadow3, @shadow4, @shadow5) {
    -webkit-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
    -moz-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
    box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
}

編集：

わかりました。まだLESSについて学習していますが、実際には、特定の状況では、最も適切なオーバーロードではなく、オーバーロードの[〜＃〜] all [〜＃〜]が混在するようですパラメータリスト。結果が異なる場合があります。その後、予想されるパラメーターの数と一致するように、box-shadow-2またはbox-shadow-3という名前に変更されました。何が起こっているのかを理解したり、より良い解決策を見つけたら、回答を修正します。

6
Paul Go

これはnewer LESSバージョンで動作します：

.box-shadow(2px 2px 3px rgba(0,0,0,.4), 0px 0px 5px rgba(0,0,0,.8););
                                  // this semicolon is important! ^

そして、この醜いバージョンはolder LESSバージョンでも動作します：

.box-shadow(~"2px 2px 3px rgba(0,0,0,.4), 0px 0px 5px rgba(0,0,0,.8)");

pdate：LESSが進化したため、この回答は更新され、再び正しいものになりました。ありがとうMicha Mi Rybak

73
iamnotsam

正常に動作するはずです。以前使用したことがあります。このミックスインで試してください：

.box-shadow (@shadow1, @shadow2: transparent 0 0 0 ) {
    -moz-box-shadow: @shadow1, @shadow2;
    -webkit-box-shadow: @shadow1, @shadow2;
    box-shadow: @shadow1, @shadow2;
}

その後：

.box-shadow(inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.5));
12
elclanrs

LESSはコンマを取り除きます。したがって、@arguments値は次のようになります。

inset 0 0 50px rgba(0,0,0,0.3) 0 0 10px rgba(0,0,0,0.5);

これはボックスシャドウとしては無効です。

代わりに、コンマが必要なときにこれを行います。

@temp: inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.5);

.box-shadow(@temp);
7
Camilo Martin
.box-shadow (@shadow1) {
    -webkit-box-shadow: @shadow1;
    -moz-box-shadow: @shadow1;
    -ms-box-shadow: @shadow1;
    -o-box-shadow: @shadow1;
    box-shadow: @shadow1;
}
.box-shadow (@shadow1, @shadow2) {
    @temp: @shadow1, @shadow2;
    .box-shadow(@temp);
}
.box-shadow (@shadow1, @shadow2, @shadow3) {
    @temp: @shadow1, @shadow2, @shadow3;
    .box-shadow(@temp);
}
4
胡忠晞

今のところ、あなたの解決策は実際に機能するので、この質問は一種の時代遅れです。

しかし、多くの人々はそれに気づいていないようですので、理由を説明しようとします：

実際にコンマ区切りの引数のリストをミックスインに渡すのは非常に簡単です。セミコロン（;）ミックスイン呼び出しでコンマの代わりに。

LESSドキュメント から：

パラメータはセミコロンまたはカンマで区切られています。セミコロンの使用をお勧めします。記号コンマには二重の意味があります。それは、ミックスインパラメータセパレータまたはcssリストセパレータとして解釈できます。コンマ区切り記号としてコンマを使用すると、引数としてコンマ区切りリストを使用できなくなります。

セミコロンにはそのような制限はありません。コンパイラーは、mixin呼び出しまたは宣言内で少なくとも1つのセミコロンを検出すると、引数がセミコロンで区切られていると想定します。その後、すべてのコンマはcssリストに属します。

ミックスイン定義は、よく知られている通常の構文を使用します。

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

ただし、mixincallはセミコロンを使用して引数を区切ります。セミコロンを使用すると、コンマはセパレーターとして扱われなくなり、問題なくmixinに渡されます。

.box-shadow(
  inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.5);
);

（上記の場合のように）1つのリストだけが渡される場合、最後にもセミコロンを使用する必要があることに注意してください。

複数の背景に関する私の答え をチェックして、mixin呼び出しが複数のパラメーターでどのように見えるかを確認してください。そのうちのいくつかはコンマ区切りリストです。

4
Michał Rybak

ここに別の解決策があります（私はもっと好きです）：

e()文字列関数を使用します。例：e("S1, S2")は、引用符なしでS1, S2を返します。

長い例：

定義：

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

用途：

.box-shadow( e("inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2)") );

出力：

-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2);

リファレンス： http://lesscss.org/functions/#string-functions-e

0
Andrei Surdu