完成高级解决方案

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

Answer 3

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

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

Answer 4

我鼓励你尝试编写自己的mixins。这是我用于浏览器前缀的那个。

@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);

Answer 5

$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;
}

Answer 6

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

Answer 7

完成高级解决方案

变量:: 创建包含所有或可用前缀的变量

/* CREATE vars with all or usable prefixes */
$all-vendors: (
    'webkit','apple','khtml',
    'moz','rim','xv',
    'ms','o'
);

$using-vendors: (
    'webkit', 'moz', 'ms', 'o'
);

实际混音功能:: Mixin用于多个声明＆amp;＆amp; 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; }

其他选项是使用考拉，只需启用自动前缀，它将像魅力一样工作。

you can download it from here.

*或使用grunt构建系统。 *

Answer 8

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

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

Answer 9

以下是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%);
}

Sass：浏览器供应商前缀

9 个答案:

完成高级解决方案

变量:: 创建包含所有或可用前缀的变量

最后在使用SASS编译器

输出