Sass：浏览器供应商前缀

我对Sass/Compass非常陌生，所以这个问题对你们中的许多人来说可能听起来很愚蠢

无论如何，我需要知道的是如何为浏览器供应商前缀创建一个mixin，我可以反复使用这些前缀，而不必每次都键入它们

我在网上看过一些教程，但我只是不能理解一些正确应用它们所需要的概念

我现在需要的是在CSS中实现这一点：

* { 
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;          
        -ms-box-sizing:border-box; 
         -o-box-sizing:border-box; 
            box-sizing:border-box; 
  }

---

谢谢。

听起来你想用指南针混音器。您的SASS文件如下所示：

@import "compass/css3/box-sizing";

* {
    @include box-sizing(border-box);
}

selector {
    -webkit-box-sizing: border-box;
    -apple-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -rim-box-sizing: border-box;
    -xv-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

并将编译为：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

您可以看到其他CSS3指南针混音器。不过，请注意，Compass不包括前缀，例如

-ms box size

，因为。如果你真的想要这些额外的属性，你可以这样做：

@import "compass/css3/shared"

* {
    @include experimental(box-sizing, border-box, -moz, -webkit, -o, -ms, not -khtml, official);
}

---

我还想提取供应商前缀，但我没有compass

@mixin vendor-prefix($name, $value) {
  @each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', '') {
    #{$vendor}#{$name}: #{$value};
  }
}

Sass：

呈现：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; }

另请参见：

---

以下是我的sass解决方案，用于处理供应商前缀：

它与@rimian的解决方案类似，但您只需要包含一个带有css属性及其值的mixin，它会自动使用必要的供应商前缀呈现css。 因此：

呈现：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

但这是：

* {
  @include prefix(display, flex)
}

呈现：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

---

它仍处于测试阶段，可能有bug，但我正在努力改进它，并加入新功能。我鼓励您尝试编写自己的混音。这是我正在使用的浏览器前缀

@mixin prefix ($prop, $val...)
  -webkit-#{$prop}: #{$val}
  -moz-#{$prop}: #{$val}
  -ms-#{$prop}: #{$val}
  #{$prop}: #{$val}

然后，只需键入即可使用它（以框大小为例）：

结果如下：

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

-webkit-box-shadow: 0 2px rgba(0,0,0, 0.1), 0 0 0 1px rgba(0,0,0, 0.1);
-moz-box-shadow: 0 2px rgba(0,0,0, 0.1), 0 0 0 1px rgba(0,0,0, 0.1);
-ms-box-shadow: 0 2px rgba(0,0,0, 0.1), 0 0 0 1px rgba(0,0,0, 0.1);
box-shadow: 0 2px rgba(0,0,0, 0.1), 0 0 0 1px rgba(0,0,0, 0.1);

如果需要传递多个值，可以使用括号（用于转换）：

结果如下：

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

-webkit-box-shadow: 0 2px rgba(0,0,0, 0.1), 0 0 0 1px rgba(0,0,0, 0.1);
-moz-box-shadow: 0 2px rgba(0,0,0, 0.1), 0 0 0 1px rgba(0,0,0, 0.1);
-ms-box-shadow: 0 2px rgba(0,0,0, 0.1), 0 0 0 1px rgba(0,0,0, 0.1);
box-shadow: 0 2px rgba(0,0,0, 0.1), 0 0 0 1px rgba(0,0,0, 0.1);

---

我认为你应该使用Autoprefixer，这样你就不必再担心浏览器前缀了。 Autoprefixer使用caniuse.com的数据库。 我建议您开始使用Grunt或Gulp，然后将插件Autoprefixer作为一项任务，它将重新编译css并为您输出所需的浏览器前缀

$vendors: (
    '-webkit-','-apple-','-khtml-',
    '-moz-','-rim-','-xv-',
    '-ms-','-o-',''
);
@mixin pref($prop,$val...) {
    @each $key in $vendors {
        #{$key}#{$prop}:$val;
    }   
}
selector {
    @include pref(box-sizing,border-box);
}

渲染如下：

@import "compass/css3/box-sizing";

* {
    @include box-sizing(border-box);
}

selector {
    -webkit-box-sizing: border-box;
    -apple-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -rim-box-sizing: border-box;
    -xv-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

完全提前解决方案 变量：：使用所有前缀或可用前缀创建变量 实际混合函数：：多个声明的Mixin和多个声明的Mixin

###实际用法：：在任何选择器中使用@include

多个示例

/** Prefixes usage **/
.selector {
  @include prefs((
    column-count: 3,
    column-gap: 1.5em,
    column-rule: 2px solid hotpink
  ), $using-vendors);
}

单个预混合的示例

.cc3 {
    @include pref(column-count,3,webkit moz ms);
} 
.ccc4 {
    @include pref(column-count, 4, $all-vendors);
}

最后使用SASS编译器编译完成 输出 另一个选择是使用考拉，只要启用自动前缀，它就会像魅力一样工作

---

*或者使用grunt构建系统*

单个或多个声明的我的版本

//prefix vendors
$prefixes: (
    'webkit', 'moz'
);

//prefix mixin
@mixin prefix($declarations: ()) {
    @each $property, $value in $declarations {
        @each $prefix in $prefixes {
            #{'-' + $prefix + '-' + $property}: $value;
        }
        #{$property}: $value;
    }
}

@include prefix((animation-name:fadeInDown,animation-duration: 1s));

多个声明的用法

//prefix vendors
$prefixes: (
    'webkit', 'moz'
);

//prefix mixin
@mixin prefix($declarations: ()) {
    @each $property, $value in $declarations {
        @each $prefix in $prefixes {
            #{'-' + $prefix + '-' + $property}: $value;
        }
        #{$property}: $value;
    }
}

@include prefix((animation-name:fadeInDown,animation-duration: 1s));

单一声明的用法

 @include prefix((animation-name:fadeInDown));

---

以下是SASS官方网站上给出的示例-

---

hopper，当我将其添加到.scss文件

@import“compass/css3/box size”时，编译错误被注入到.css文件中。发生什么事？文件
“盒子大小
？谢谢。盒子大小文件位于Compass gem的内部。您是如何执行编译的？如果使用SASS命令行进行编译，则需要指定
--compass
选项以确保compass文件位于加载路径上，例如
SASS--compass file.scss file.css
。我在CMD行中所做的是：（已经在我的项目文件夹中）
SASS--watch scss:css--style compact
。我在看文件夹，不是文件。是否需要添加
--compass file.scss file.css
？如果是这样，我是否必须使用这些文件，或者我是否可以使用“监视”文件夹？Tnx.监视文件夹应该可以正常工作-您只需在命令中添加
--compass
标志：
sass--watch scss:css--style compact--compass
。啊哈！这是我读过的任何教程中都没有提到的部分：如果你想使用Compass已经构建好的混音器，你需要在你的命令行中加入Compass标志“
--Compass
”。它工作得很好。谢谢有趣的Rimian和相当方便的解决方案。不过，我不认为没有指南针就可以使用Sass。谢谢你的信息，给了你一票。没问题！我正在一个已经存在的框架内构建一个移动站点。我想我可以看看是否能提供指南针这可能是最有用的答案，因为它可以推广到其他属性。很好的混音人。现在需要考虑的是，当我们使用“<代码> -O/<代码> >时，前缀是因为我们正在考虑支持Opera的遗留版本。如果你问我，我会在接下来的几个月里删除CSS中的
-o-
前缀。所以像这样的混音也应该注意这一点，这样我们就不会在CSS中注入不必要的前缀。我给了你一票，朋友。这很有趣，谢谢。当然比我见过的其他定制混音器更容易使用。快速提问：什么是
+
？为什么不使用
@include
？您可以在.sass语法中同时使用这两种语法，但我发现“+”更易于阅读，尤其是在使用简短的mixin名称时。这是一个相当不完整的答案。您应该在回复中包含指向推荐的外部库的链接以及解决方案的基本要点。（即，所需的grunt配置等）由于我现在经验丰富，我确实使用Autoprefixer，但我通过我使用的Sass编译器应用程序而不是任务运行程序来使用它。我目前使用的是能够在生成源地图时应用AutoRefixer的。我也使用过，但如果您选择了源地图，则无法使用AutoRefixer。就算我还没有尝试过最新的版本，v.5.1（在写这篇文章的时候）。很好！但是，我现在使用Autoprefixer:）。谢谢，我给了你一个投票。Thx，是的，现在应用程序有自己的自动前缀，我一直在使用考拉，但我有时会添加考拉没有的特殊供应商前缀。谢谢它运行。但我认为你放弃了
.gray {
  -moz-filter: grayscale(50%);
  -webkit-filter: grayscale(50%);
  filter: grayscale(50%);
}