🤟🏼 👼🏼 🐰 Hayaku-CSSをより速く書く 😲 👨‍✈️ 🏊

Hayakuは、高速なWeb開発を支援する便利なスクリプトのコレクションです。

Hayakuを使用すると、エディターでCSSコードをすばやく作成および管理できます。残念ながら、 Sublime Text 2でのみ利用可能です。他のエディターのサポートは後で予定されています。

設置

環境設定→パッケージコントロール（CTRL + SHIFT + P）→パッケージのインストール→Hayaku

Sublime Text 2を再起動します。

特徴

ファジーCSSプロパティの略語

Sublime Text 2を使用したことがある場合は、ファジー検索機能に精通しているでしょう。ほぼ同じことを実装しますが、CSS用です。 wi

とwi

TAB

キーを押すと、 width

ます。 wid

またはwdt

と入力しても同じ結果になります-これはファジー検索です:)ほとんどのプロパティでは、略語は非常に短く、2、3文字で構成されていますが、プロパティ名から必要な数の文字を印刷することができます。

Hayakuは略語を完全に解読していないように見える場合があります。たとえば、 b

はbackground

またはborder

ではなくbottom

なりborder

。これは、プロパティleft, right, top, bottom

が最も優先されるためです。

スマートな略語

省略形はプロパティ+値として記述できますが、それらの間にセパレータを使用する必要はありません。例： por

（または、pore、posrelなど）はposition:relative

変わります。繰り返しますが、実際のファジーの魔法:)この略語でセパレーターを本当に使いたい場合-プロパティと値の間にコロンを追加しても、結果は変わりません。ただし、場合によってはコロンを使用しても意味があります。たとえば、 pr

を使用するとpadding-right

として解釈でき、コロンを追加するとあいまいさが解消されます。 padding

はrで始まる値をとらないため、このオプションをスキップして先に進みます。

 p:r → position: relative pr → padding-right:

略語の数字

速は数字で略語を書く多くの方法を理解している

略語の後に番号を書くだけで、値として使用できます。例えば

 w10 → width: 10px (,   )

負の値もサポートされています：

 ml-10 → margin-left: -10px

略語のどこかに終止符を打つと、Hayakuはemが必要だと想定します。例えば

 w10.5 → width: 10.5em

パーセントの略語はパーセントです、例えば：

 w10percents = w10perc = w10p → width: 10%

残りのユニットもサポートされています。例：

 h2pt → height: 2pt w10h → width: 10vh

略語の色

文字列と数字に加えて、Hayakuは略語で色のデコードをサポートしています。色の意味を示すには、いくつかの方法があります。

 c0 → color: #000 cF → color: #FFF (  ,   Hayaku    ) cFA → color: #FAFAFA c#fa → color: #FAFAFA (   ,    #)

！重要な修飾子

便利な機能-追加!

略号の後に、復号化後に!important

 dn! → display:none !important;

自動ベンダープレフィックス。

ベンダープレフィックスが必要ですか？ Hayakuもそれらをサポートしています！

 bra1.5 → -webkit-border-radius: 1.5em; border-radius: 1.5em;

プロパティごとに、異なるプレフィックスが挿入されます。これはディクショナリで定義されており、次のバージョンの1つでは、Sublime Text 2の設定を使用してそのようなものを再定義することができます。

いくつかのデフォルト

プロパティのみを記述する場合、Hayakuはデフォルト値を挿入し、その内部にカーソルを移動して、値の書き込みを続行できるようにします。例：

 w → width: |100% (| - ) h → height: |100% c → color: |#FFF etc...

値の事後展開

最初にプロパティを記述し、次に値のオートコンプリートを使用できるようにする別の機能。

 po → position: (    . ,    a, Hayaku    absolute) po → position: a| → position: absolute

単位と色の値もサポートされています。

インラインコメント

別の素晴らしいトリック：

 // → /* */

プリプロセッサでのHayakuの使用。

もちろん、CSSをより速く書く必要はなく、CSSプリプロセッサをすでに使用していると言えます:) 幸いなことに、HayakはSass、Less、Stylusなどと簡単に連携できます。

ショートカットに中括弧を追加する

セレクターを書き込んだ後にCTRL + ENTERを押すと、自動的に中括弧が作成され、セレクター内にカーソルが移動します。（@CyberAP）

良いレイアウト！

UPD：判明したように、 Hayakの著者はkizuとTheBitsです

Hayaku-CSSをより速く書く

設置

特徴