40

我对 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; 
  }

谢谢。

4

9 回答 9

75

我还想抽象出供应商前缀，但我没有可用的指南针。

@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/

于 2013-07-01T07:41:04.323 回答
26

听起来你想使用 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 mixin 。但是请注意，Compass 不包括前缀-ms-box-sizing，例如，因为IE8+ 已经实现了它而没有前缀。如果你真的想要那些额外的属性，你会这样做：

@import "compass/css3/shared"

* {
    @include experimental(box-sizing, border-box, -moz, -webkit, -o, -ms, not -khtml, official);
}
于 2012-10-08T21:54:04.430 回答
5

这是我处理供应商前缀的 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;
}

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

于 2013-11-10T05:30:24.483 回答
4

我鼓励你尝试编写自己的 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);
于 2013-12-05T19:39:33.060 回答
2

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

于 2014-02-19T17:12:27.443 回答
2 
$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;
}
于 2016-06-05T23:22:13.380 回答
1

完整的高级解决方案

变量 :: CREATE 具有所有或可用前缀的变量

/* 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);
}

最后使用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; }

另一种选择是使用考拉，只需启用自动前缀，它就会像魅力一样工作。

你可以在这里下载。

*或使用 grunt 构建系统。*

于 2016-09-05T13:12:24.797 回答
0

这是官方 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%);
}
于 2020-08-02T08:10:14.863 回答
0

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

//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));
于 2020-05-02T17:00:05.840 回答