2

我有一个文件，其中定义了一些用于边框阴影、渐变等的CSS3
规则。 为了可比性，我需要behavior: url('/assets/css3pie.htc');在 IE 中添加 for 支持。 

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

为我的大多数CSS3添加了行为规则，例如边框阴影、渐变和边框半径。

不幸的是，我注意到在输出中，当我使用两个或更多这些 CSS3 规则时，我最终也会得到多个behavior: url('/assets/css3pie.htc');给定对象的规则。

一个示例输出是： 

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是一个错误。

解决这个问题的最漂亮的方法是删除behavior定义属性并定义一个css3piemixin，如下所示： 

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

然后使用它，将以下行添加到每个启用CSS3的元素： 

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

在处理类似案例时，我想出了这个解决方案。

由于：

IE 将行为属性的 URL 解释为相对于源 HTML 文档，而不是像其他所有 CSS 属性一样相对于 CSS 文件

（更多信息），网址保存在一个变量中，可以根据项目轻松更改：

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

除非 2.1 Android 及更低版本和 3.2 iOS 及更低版本或 IE8 及更低版本的 CSS3PIE，否则不需要前缀，因此不再需要此 mixin –更多信息

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

除非 3 Android 及更低版本和 4.3 iOS 及更低版本或 IE8 及更低版本的 CSS3PIE，否则不需要前缀 -更多信息

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

关于“ !optional”的注释：此标志是为了避免 SASS 在 @extend 不起作用时抛出错误（例如：占位符在 IE 的 .scss 文件中，而不是在一般文件中，但 mixin 由两者） -更多信息

占位符选择器：在文件的开头允许以下规则覆盖任何位置/固定属性。
关于“ 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更干净，属性只声明一次，便于IE和非IE的样式分离。

于 2012-12-20T12:37:57.990 回答
1

传递另一个参数并使用@for指令来指定 mixin 是否应该输出额外的代码：

@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 库，而不是编写这些类型的 mixin。

这个库已经有一个完整的 css3 mixins 列表，如果你需要它也支持 css3pie。

于 2012-11-02T05:18:53.123 回答
-1

我通过为content-type网络浏览器提供正确的服务来让它工作。换句话说，我将以下行添加到我的 apache.htaccess文件中：

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