Question

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

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

我的 CSS3 的大部分内容都添加了行为规则，例如 border-shadow，gradient和border-radius 。

不幸的是我注意到在我使用两个或更多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
}

哪种解决方案最好？有没有办法检查继承树以及是否已定义规则？

Answer 1

看起来它是一个 SCSS 错误。

大多数属性会在类似情况下被覆盖，但有些属性可以定义多次，如background。

这就是为什么它不是 SCSS 覆盖规则的默认行为。 <{1}}属性未定义为behavior属性的原因是错误。

解决问题的最好方法是删除should be overwritten定义属性并定义behavior mixin，如下所示：

css3pie

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

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

Answer 2

在处理类似情况时，我提出了这个解决方案。

由于：

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

（more info），网址保存在变量中，可根据项目轻松更改：

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

除非2.1 Android及以下以及3.2 iOS及以下版本或IE8及以下版本的CSS3PIE，否则不需要前缀，因此不再需要此mixin - more info

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

除非3 Android及以下版本以及4.3 iOS及以下版本或IE8及以下版本的IE3PIE版本，否则不需要前缀 - more info

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

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

占位符选择器：在文件的开头，允许以下规则覆盖任何位置/修复属性关于“position:relative”的说明：此处声明了修复z-index问题（消失背景/边框/阴影） - more info。
根据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之间的样式分离。

Answer 3

传递另一个参数并使用@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

Answer 4

我建议使用名为Compass的SASS库代替写这些类型的mixins。

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

Answer 5

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

AddType text/x-component .htc

避免SCSS规则重复

5 个答案: