我对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;
}
谢谢。
我还想抽象出供应商前缀，但没有指南针。
@mixin vendor-prefix($name, $value) {
@each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', '') {
#{$vendor}#{$name}: #{$value};
}
}
屁股：
* {
@include vendor-prefix('box-sizing', 'border-box');
}
呈现：
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box; }
另请参阅：
http://stefanwienert.net/blog/2012/05/18/easy-css-vendor-prefix-mixin-for-sass/
听起来你想使用Compass盒子大小的混合。您的 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。但请注意，Compass不包括像-ms-box-sizing这样的前缀，例如，因为IE8 +在没有前缀的情况下实现了它。如果你真的想要这些额外的属性，这就是你的做法：
@import "compass/css3/shared"
* {
@include experimental(box-sizing, border-box, -moz, -webkit, -o, -ms, not -khtml, official);
}
这是我
处理供应商前缀的糟糕解决方案： https://github.com/Aloge/sass-prefixer
它类似于@rimian的解决方案，但您只需要包含带有 css 属性及其值的 mixin，它会自动呈现带有必要供应商前缀的 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;
}
仍处于测试阶段，可能有错误，但我正在努力改进它并包含新功能
我鼓励你尝试编写自己的mixins。这是我用于浏览器前缀的那个。
@mixin prefix ($prop, $val...)
-webkit-#{$prop}: #{$val}
-moz-#{$prop}: #{$val}
-ms-#{$prop}: #{$val}
#{$prop}: #{$val}
然后，您可以通过简单地键入（以框大小为例）来使用它：
+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);
我认为
您应该使用自动前缀，这样您就不必担心浏览器前缀了。自动前缀程序使用 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);
}
渲染如下：
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;
}
完整的高级解决方案
变量 ：： 创建具有所有或可用前缀的变量
/* CREATE vars with all or usable prefixes */
$all-vendors: (
'webkit','apple','khtml',
'moz','rim','xv',
'ms','o'
);
$using-vendors: (
'webkit', 'moz', 'ms', 'o'
);
实际混合函数 ：： 用于多个声明的 Mixin &&用于多个声明的 Mixin
/** Mixin for multiple declarations **/
@mixin prefs($declarations, $prefixes: ()) {
@each $property, $value in $declarations {
@each $prefix in $prefixes {
#{'-' + $prefix + '-' + $property}: $value;
}
#{$property}: $value;
}
}
/** Mixin for single property to be prefixed **/
@mixin pref($property, $value, $prefixes){
@each $prefix in $prefixes {
#{'-' + $prefix + '-' + $property}: $value;
}
#{$property}: $value;
}
###Actual 用法 ：： 在任何选择器中使用@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 编译器编译后
输出
.selector {
-webkit-column-count: 3;
-moz-column-count: 3;
-ms-column-count: 3;
column-count: 3;
-webkit-column-gap: 1.5em;
-moz-column-gap: 1.5em;
-ms-column-gap: 1.5em;
column-gap: 1.5em;
-webkit-column-rule: 2px solid hotpink;
-moz-column-rule: 2px solid hotpink;
-ms-column-rule: 2px solid hotpink;
column-rule: 2px solid hotpink; }
.cc3 {
-webkit-column-count: 3;
-moz-column-count: 3;
-ms-column-count: 3;
column-count: 3; }
.ccc4 {
-webkit-column-count: 4;
-apple-column-count: 4;
-khtml-column-count: 4;
-moz-column-count: 4;
-rim-column-count: 4;
-xv-column-count: 4;
-ms-column-count: 4;
column-count: 4; }
另一种选择是使用考拉，只需启用自动前缀，它就会像魅力一样工作。
您可以从此处下载。
*或使用咕噜咕噜的构建系统。
单个或多个声明的"我的版本"
//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官方网站上给出的示例 - 链接
@mixin prefix($property, $value, $prefixes) {
@each $prefix in $prefixes {
-#{$prefix}-#{$property}: $value;
}
#{$property}: $value;
}
.gray {
@include prefix(filter, grayscale(50%), moz webkit);
}
.gray {
-moz-filter: grayscale(50%);
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
}