Sass 避免SCSS规则重复

我有一个文件，其中定义了边界阴影、渐变等的CSS3规则。
为了便于比较，我需要添加

行为：url（'/assets/css3pie.htc'）用于IE中的支持。

行为规则是为我的大多数CSS3添加的，如边界阴影、渐变和边界半径

不幸的是，我注意到，在输出中，当我使用两个或多个CSS3规则时，我也会得到一个以上的
行为：url（'/assets/css3pie.htc'）给定对象的规则

一个示例输出是：

哪一个是最好的解决方案？有没有办法检查继承树以及是否已经定义了规则？
传递另一个参数并使用
@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

我建议使用名为
编写这些类型的mixin

这个库已经有了一个全面的CSS3mixin列表，如果您需要的话，它还支持css3pie。
看起来它是一个SCSS错误

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

这就是为什么它不是SCSS覆盖规则的默认行为。
行为
属性的定义不像
属性那样应该被覆盖的原因是一个bug

解决此问题最漂亮的方法是删除
行为
定义属性并定义一个
css3pie
mixin，如下所示：

然后，要使用它，请向每个启用CSS3的元素添加以下行：

在处理一个类似的案例时，我提出了这个解决方案

由于：

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

（），url保存在一个变量中，可以根据项目轻松更改：

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

无需前缀，除非2.1 Android及以下版本和3.2 iOS及以下版本，或IE8及以下版本的CSS3PIE，因此不再需要此混音-

无需前缀，除非3安卓及以下版本和4.3 iOS及以下版本或IE8及以下版本的CSS3PIE——

关于“
！optional
”的注意事项：此标志用于避免SASS在@extend不起作用时抛出错误（例如：占位符位于IE的.scss文件中，而不在常规文件中，但mixin由两者调用）–

占位符选择器：位于文件开头，允许以下规则覆盖任何位置/固定属性。

关于“
position:relative
”的说明：这里声明它是为了解决z索引问题（背景/边框/阴影消失）–。

根据css和项目，此规则可能会破坏布局

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

用法

输出

.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之间的风格分离。
我通过向web浏览器提供正确的
内容类型来实现它。
换句话说，我在apache
.htaccess
文件中添加了以下行：

AddType text/x-component .htc

这可能是SCS中的一个bug；没有正当理由在生成的输出中包含重复的属性，因此这应该在SCSS本身中解决，您不应该被要求解决这个问题。我建议你为SCSS发布一个bug报告。事实上，@lanzz，这不是bug，关于它有一个讨论@electric\g你提到的问题似乎与重复属性有关；我说的是重复的完整规则，即相同的属性具有相同的值。@lanzz所以除了手动操作（如下面的答案）或等待修复外，没有其他解决方案？我在这里创建了一个问题：我不会称之为bug，因为这是需要的行为。不过我会投票，因为更多的分离会产生更好的代码，而且它很好地解决了您的问题。这是期望的行为，因为如果不这样做，您永远无法覆盖任何属性。
$pie-path: "/myproject/PIE.htc";

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

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

%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);
}

AddType text/x-component .htc