私はSass/Compassに非常に慣れていないので、この質問は多くの人にとってばかげているように聞こえるかもしれません。
とにかく、私が知る必要があるのは、毎回入力しなくても何度も再利用できるブラウザーベンダープレフィックスのミックスインを作成する方法です。
オンラインでチュートリアルを見たことがありますが、正しく適用するために必要な概念のいくつかを理解できません。
私が今必要としているのは、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;
}
ありがとう。
また、ベンダープレフィックスを抽象化したかったのですが、コンパスを利用できませんでした。
@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/も参照してください。
コンパスボックスサイジングミックスインを使用したいようです。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コンパスミックスインはここで見ることができます。ただし、IE8 +はプレフィックスなしで実装している-ms-box-sizingため、たとえば、 Compassにはプレフィックスが含まれていないことに注意してください。これらの追加のプロパティが本当に必要な場合は、次のようにします。
@import "compass/css3/shared"
* {
@include experimental(box-sizing, border-box, -moz, -webkit, -o, -ms, not -khtml, official);
}
ベンダープレフィックスを処理するための私のsassソリューションは次のとおりです：https ：//github.com/Aloge/sass-prefixer
@rimianのソリューションと似ていますが、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;
}
まだベータ版であり、バグがある可能性がありますが、私はそれを改善し、新しい機能を含めるように取り組んでいます
独自のミックスインを作成してみることをお勧めします。これが私がブラウザのプレフィックスに使用しているものです。
@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);
ブラウザのプレフィックスについて心配する必要がなくなるように、Autoprefixerを使用する必要があると思います。Autoprefixerはcaniuse.comのデータベースを使用します。GruntまたはGulpの使用を開始してから、プラグインAutoprefixerをタスクとして使用することをお勧めします。これにより、cssが再コンパイルされ、必要なブラウザープレフィックスが吐き出されます。
$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;
}
変数::すべてまたは使用可能なプレフィックスを持つ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 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);
}
シングル設定ミックスインの例
.cc3 {
@include pref(column-count,3,webkit moz ms);
}
.ccc4 {
@include pref(column-count, 4, $all-vendors);
}
.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ビルドシステムを使用します。*
単一または複数の宣言のマイバージョン
//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));
ここに公式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%);
}