Sass：浏览器供应商前缀

我鼓励您尝试编写自己的mixins。这是我正在使用的浏览器前缀。

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

然后，您只需输入以下内容即可使用它（以box-sizing为例）：

+prefix (box-sizing, border-box)

结果为以下CSS：

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

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

+prefix (box-shadow, (0 2px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1))

结果为以下CSS：

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

听起来好像您想使用Compass 框大小的 mixin。您的SASS文件如下所示：

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

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

并将编译为此：

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

您可以在此处查看其他CSS3 Compass mixins 。不过请注意，-ms-box-sizing例如Compass不包含诸如之类的前缀，因为IE8 +实现了没有prefix的前缀。如果您确实想要这些额外的属性，可以按照以下方式进行：

@import "compass/css3/shared"

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

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

这是我处理供应商前缀的sass解决方案：https : //github.com/Aloge/sass-prefixer

它与@rimian的解决方案类似，但是您只需要在mix中添加css属性及其值，它会自动使用必要的供应商前缀来呈现css。所以这：

* {
  @include prefix(box-sizing, border-box)
}

呈现：

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

但是这个：

* {
  @include prefix(display, flex)
}

呈现：

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

它仍处于测试阶段，并且可能存在错误，但我正在努力对其进行改进并包括新功能