我对 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
听起来你想使用 Compass box-sizing 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 here。但请注意，Compass 不包括像 -ms-box-sizing 这样的前缀，例如，因为 IE8+ has implemented it without a prefix。如果你真的想要这些额外的属性，你会这样做：
@import "compass/css3/shared"
* {
@include experimental(box-sizing, border-box, -moz, -webkit, -o, -ms, not -khtml, official);
}
【讨论】：
@import "compass/css3/box-sizing"; 时，会在 .css 文件中注入一个编译错误。这是怎么回事？文件"box-sizing 在哪里？谢谢。
--compass 选项以确保 Compass 文件位于加载路径上，例如sass --compass file.scss file.css.
sass --watch scss:css --style compact。我在看文件夹，而不是文件。需要加--compass file.scss file.css吗？如果是这样，我是否必须使用这些文件，或者我可以让它“监视”文件夹吗？ Tnx。
--compass 标志：sass --watch scss:css --style compact --compass。
--compass”。它工作得很好。谢谢！
我也想抽象出供应商前缀，但没有可用的指南针。
@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/
【讨论】：
这是我处理供应商前缀的 sass 解决方案：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;
}
它仍处于测试阶段，可能存在错误，但我正在努力改进它并添加新功能
【讨论】：
-o- 前缀是因为我们正在考虑支持旧版本的Opera。如果你问我，在接下来的几个月里，我将在我的 CSS 中删除 -o- 前缀。所以像这样的 mixin 也应该注意这一点，这样我们就不会在 CSS 中注入不必要的前缀。给你一个upvote amigo。
我鼓励您尝试编写自己的 mixin。这是我用于浏览器前缀的那个。
@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);
【讨论】：
+ 是什么？为什么不使用@include？
我认为您应该使用 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);
}
呈现如下：
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 Usage :: 在任何选择器中使用@include
多个示例
/** Prefixes usage **/
.selector {
@include prefs((
column-count: 3,
column-gap: 1.5em,
column-rule: 2px solid hotpink
), $using-vendors);
}
Single pref mixin 示例
.cc3 {
@include pref(column-count,3,webkit moz ms);
}
.ccc4 {
@include pref(column-count, 4, $all-vendors);
}
.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; }
其他选项是使用考拉，只需启用自动前缀，它就会像魅力一样工作。
you can download it from here.
*或使用 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));
单一声明的用法
@include prefix((animation-name:fadeInDown));
【讨论】：
这里是 SASS 官方网站中给出的示例 - Link
@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%);
}
【讨论】：