クロスブラウザーとの互換性のためのコードを生成する方法

Question

アトムやサブライムなどのテキストエディターで使用できるショートカットやパッケージとは何ですか？言い換えれば

、どのように私はすべてを入力せずに、以下のコードを生成することができます。

.translateX { 
    -webkit-transform: translateX(10px); 
    -moz-transform: translateX(10px); 
    -ms-transform: translateX(10px); 
    -o-transform: translateX(10px); 
    transform: translateX(10px); } 

Answer 1

まあ、ベンダー固有のcss接頭辞を自動的に生成する同様のソリューションを探している人は誰でも、私はプラグインAutoprefixerを発見しました。 Atom（とSublime）を使用するには、単にパッケージ'autoprefixer'をインストールし、環境設定にキーバインディングを追加しました。

https://github.com/sindresorhus/atom-autoprefixer

Answer 2

私はアトムを使用するので、私はよく分からないので、私はアトムでそれを行う方法をあなたに教えてあげますそれはおそらく似ているでしょう。

1. オープンアトムで、Macの場合はCTRL + ,またはCMD + ,を押してください。
2. 左側のOpen Config Folderオプションをクリックします。
3. オープンsnippets.csonファイルを次のコードを追加します：

'*': 
 
    'Translate X': 
 
     'prefix': 'translatex' 
 
     'body': """ 
 
      .translateX { 
 
      -webkit-transform: translateX(10px); 
 
      -moz-transform: translateX(10px); 
 
      -ms-transform: translateX(10px); 
 
      -o-transform: translateX(10px); 
 
      transform: translateX(10px); } 
 
     """

'*'をファイル（HTML、CSS、JS、PHPなど）のすべてのタイプのために、このスニペットを適用することを意味します。

'Translate X'は、このスニペットの名前です。

'translatex'は、入力してTABキーを押すとスニペットがすべてを満たすことができる値です。

'body'には、このスニペットが保持するコンテンツが含まれています。一行のボディスニペットを作成する場合は一重引用符（''）を使用できますが、この例のような複数行のスニペットがある場合は、三重二重引用符（"""）を入力する必要があります。

EDIT：

デフォルト値なしでスニペットを定義したい場合、あなたはそのようにそれを行うことができます：原子で

'*': 
 
    'Translate X': 
 
     'prefix': 'translatex' 
 
     'body': """ 
 
      .translateX { 
 
      -webkit-transform: $1; 
 
      -moz-transform: translateX($1); 
 
      -ms-transform: translateX($1); 
 
      -o-transform: translateX($1); 
 
      transform: translateX($1); } 
 
     """

、$<number>ですカーソル位置。この例では、$1の位置に5つのカーソルを含むスニペットを生成します。

あなただけの1カーソルを持っているしたい場合は、あなたが行うことができます：あなたは今、スニペットを生成すると

'*': 
 
    'Translate X': 
 
     'prefix': 'translatex' 
 
     'body': """ 
 
      .translateX { 
 
      -webkit-transform: $1; 
 
      -moz-transform: translateX($2); 
 
      -ms-transform: translateX($3); 
 
      -o-transform: translateX($4); 
 
      transform: translateX($5); } 
 
     """

は、デフォルトのカーソル位置は$1になります。 TABを押すと、$2の位置にループします。

あなたはSASSを使用している場合：

あなたはSASSを使用している場合は、任意のスニペットことなく、容易にこれを行うことができます。このように、唯一のミックスインを保持するファイルを作成します。

/* Example syntax: @include transition(0.5s ease all); */ 
 
@mixin transition($arg...) { 
 
    transition: $arg; 
 
    -o-transition: $arg; 
 
    -ms-transition: $arg; 
 
    -moz-transition: $arg; 
 
    -webkit-transition: $arg; 
 
} 
 

 
/* Example syntax: @include transform(scale(1.1, 1.1)); */ 
 
@mixin transform($arg...) { 
 
    transform: $arg; 
 
    -o-transform: $arg; 
 
    -ms-transform: $arg; 
 
    -moz-transform: $arg; 
 
    -webkit-transform: $arg; 
 
} 
 

 
/* Example syntax: @include box-shadow(1px, 5px, 10px, rgba(0,0,0,0.5)); */ 
 
@mixin box-shadow($x, $y, $radius, $color...) { 
 
    box-shadow: $x $y $radius $color; 
 
    -moz-box-shadow: $x $y $radius $color; 
 
    -webkit-box-shadow: $x $y $radius $color; 
 
}

し、他のファイルでは、あなたがそれを使用する必要があるときに、ちょうど書き込みを：

.someClass { 
    @include transition(0.3s ease all); 
}