2

ボーダーシャドウやグラデーションなどのCSS3ルールがいくつか定義されたファイルがあります。
比較のbehavior: url('/assets/css3pie.htc');ために、IEでサポートするためにを追加する必要があります。 

@mixin box-shadow($props) {
  -webkit-box-shadow: #{$props};
     -moz-box-shadow: #{$props};
          box-shadow: #{$props};
  behavior: url('/assets/css3pie.htc');
}

動作ルールは、border-shadow、gradients、border-radiusなどのほとんどのCSS3に追加されています。

残念ながら、これらのCSS3ルールを2つ以上使用すると、出力でbehavior: url('/assets/css3pie.htc');特定のオブジェクトのルールが2つ以上になることに気付きました。

出力例は次のとおりです。 

button {
-webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  behavior: url("/assets/css3pie.htc"); # first time defined by the border-radius rule
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  behavior: url("/assets/css3pie.htc"); # second time, defined from the box-shadow rule
}

どちらが最善の解決策ですか？継承ツリーをチェックし、ルールがすでに定義されているかどうかを確認する方法はありますか？

4

5 に答える 5

5

SCSSのバグ のようです。

ほとんどのプロパティは同様のケースで上書きされますが、のように複数回定義できるプロパティもありますbackground。

これが、ルールを上書きするSCSSのデフォルトの動作ではない理由です。behaviorプロパティがプロパティのように定義されていない理由should be overwrittenはバグです。

この問題を解決する最も美しい方法は、次のように、definitionプロパティを削除し、ミックスイン behaviorを定義することです。css3pie

@mixin css3pie() {
  behavior: url('/assets/css3pie.htc');
}

次に、それを使用するには、 CSS3が有効 になっているすべての要素に次の行を追加します。

.css3-enabled-element {
  @include css3pie;
}
于 2012-11-02T10:49:26.067 に答える
3

同様のケースに取り組んでいるときに、私はこの解決策を思いつきました。

により：

IEは、他のすべてのCSSプロパティのようにCSSファイルではなく、ソースHTMLドキュメントに関連する動作プロパティのURLを解釈します。

（詳細）、URLは変数に保持され、プロジェクトに応じて簡単に変更できます。

$pie-path: "/myproject/PIE.htc";

2.1Android以下および3.2iOS以下またはIE8以下のCSS3PIEでない限り、プレフィックスは必要ありません。したがって、このミックスインはもう実際には必要ありません–詳細

@mixin border-radius ($val) {
    @each $prefix in '' {
        #{$prefix}border-radius: $val;
    }
    @extend %pie !optional;
}

3Android以下および4.3iOS以下またはIE8以下のCSS3PIEでない限り、プレフィックスは必要ありません–詳細

@mixin box-shadow ($val...) {
    @each $prefix in -webkit-, '' {
        #{$prefix}box-shadow: $val;
    }
    @extend %pie !optional;
}

""に関する注意!optional：このフラグは、@ extendが機能しない場合にSASSがエラーをスローしないようにするためのものです（例：プレースホルダーはIEの.scssファイルにあり、一般的なファイルにはありませんが、ミックスインはによって呼び出されます両方）–詳細

プレースホルダーセレクター：ファイルの先頭にあり、次のルールで位置/修正プロパティをオーバーライドできます。
""に関する注記position:relative：z-indexの問題（背景/境界線/影の消失）を修正するためにここで宣言されています–詳細情報。
cssとプロジェクトによっては、このルールがレイアウトを壊す可能性があります

%pie {
    behavior: url($pie-path);
    position: relative;
}

使用法

.item1 {
    @include border-radius(10px);
}
.item2 {
    @include border-radius(5px);
    @include box-shadow(10px 10px 10px rgba(#000, .3));
}
.item3 {
    @include box-shadow(10px 10px 10px rgba(#F90, .8));
}

出力

.item1,
.item2,
.item3 {
    behavior: url("/myproject/PIE.htc");
    position: relative;
}

.item1 {
    border-radius: 10px;
}
.item2 {
    border-radius: 5px;
    -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
            box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
}
.item3 {
    -webkit-box-shadow: 10px 10px 10px rgba(255, 153, 0, 0.8);
            box-shadow: 10px 10px 10px rgba(255, 153, 0, 0.8);
}

動作ルールは繰り返されず、cssはよりクリーンになり、プロパティは1回だけ宣言されるため、IEと非IEの間のスタイルの分離が容易になります。

于 2012-12-20T12:37:57.990 に答える
1

別の引数を渡し、@forディレクティブを使用して、ミックスインが追加のコードを出力するかどうかを指定します。

@mixin box-shadow($props, $css3pie: true) {
  -webkit-box-shadow: #{$props};
     -moz-box-shadow: #{$props};
          box-shadow: #{$props};
  @if $css3pie {
  behavior: url('/assets/css3pie.htc');
  }
}

@include box-shadow(2px 2px 2px black) // Include behavior
@include box-shadow(2px 2px 2px black, false) // Don't include behavior
于 2012-10-24T22:55:02.720 に答える
0

これらのタイプのミックスインを作成する代わりに、Compassと呼ばれるSASSライブラリを使用することをお勧めします。

このライブラリにはすでにcss3ミックスインの包括的なリストがあり、必要に応じてcss3pieもサポートされています。

于 2012-11-02T05:18:53.123 に答える
-1

content-typeWebブラウザーに正しいものを提供することで、それを機能させることができました。つまり、apache.htaccessファイルに次の行を追加しました。

AddType text/x-component .htc
于 2014-07-10T19:00:02.863 に答える