Ответ 1

Похоже, вы хотите использовать 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 здесь. Обратите внимание, однако, что Compass не включает в себя префиксы типа -ms-box-sizing, например, поскольку IE8 + внедрил его без префикса. Если вам действительно нужны эти дополнительные свойства, вот как вы это сделаете:

@import "compass/css3/shared"

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

Ответ 2

Я также хотел абстрагироваться от префиксов поставщиков, но у меня не было компаса.

@mixin vendor-prefix($name, $value) {
  @each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', '') {
    #{$vendor}#{$name}: #{$value};
  }
}

Sass:

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

Ответ 3

Вот мое решение sass для решения префиксов поставщиков: https://github.com/Aloge/sass-prefixer

Это похоже на решение @rimian, но вам нужно включить mixin с свойством css и его значением, и он автоматически отображает 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;
}

Он все еще в бета-версии, и у него могут быть ошибки, но я работаю над его улучшением и включением новых функций.

Ответ 4

Я бы посоветовал вам попробовать написать свои собственные микшины. Вот тот, который я использую для префиксов браузера.

@mixin prefix ($prop, $val...)
  -webkit-#{$prop}: #{$val}
  -moz-#{$prop}: #{$val}
  -ms-#{$prop}: #{$val}
  #{$prop}: #{$val}

Затем вы можете использовать его, просто набрав (используя в качестве примера размер окна):

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

Ответ 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;
}

Ответ 6

Я думаю, вы должны использовать Autoprefixer, чтобы больше не беспокоиться о префиксах браузера. Autoprefixer использует базу данных caniuse.com. Я рекомендую вам начать использовать Grunt или Gulp, затем подключить Autoprefixer в качестве задачи, которая будет перекомпилировать css и выплескивать необходимые вам префиксы для браузера.

Ответ 7

Полное предварительное решение

Переменные:: CREATE vars со всеми или используемыми префиксами

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

### Фактическое использование:: используйте @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; }

другой вариант - использовать Koala, просто включите auto-Prefix, и он будет работать как шарм.

вы можете скачать его здесь.

* или используйте систему сборки grunt. *