Sass:浏览器供应商前缀

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/

Answer 2

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

@import "compass/css3/shared"

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

Answer 3

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

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