sass - 如何为浏览器供应商前缀创建 SASS mixins？

Question

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

谢谢。

Answer 1

我还想提取供应商前缀，但没有可用的指南针。

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