html - 崇高なテキストに CSS プロパティのショートカットを追加できますか?

Question

このようなショートカットを SublimeText に追加できますか?

"m-a"に展開するようなものmargin: 0 auto;ですか？

これがすでに尋ねられている場合は申し訳ありません。答えが見つかりませんでした。

Answer 1

これらはスニペットと呼ばれます。この特定の例では、Toolsメニューを開いて を選択New Snippet...し、次の内容を貼り付けます。

<snippet>
    <content><![CDATA[margin: 0 auto;]]></content>
    <tabTrigger>m-a</tabTrigger>
    <scope>source.css</scope>
</snippet>

このファイルを名前を付けて保存するPackages/User/CSS/margin auto.sublime-snippetと、準備完了です。CSS ファイルを開き、 と入力m-aしTabて を押すだけで、設定は完了です。スニペットは非常に強力で、タブ ストップにカスタマイズされたデータを入力することもできます。たとえば、次のように色のカスタマイズのみを必要とするボイラープレート コードを設定できます。

<snippet>
    <content><![CDATA[body {
    max-width: 500px;
    _width: 500px;
    padding: 30px 20px 50px;
    border: 1px solid ${1:#b3b3b3};
    border-radius: 4px;
    margin: 0 auto;
    box-shadow: 0 1px 10px ${2:#a7a7a7}, inset 0 1px 0 ${3:#fff};
    background: ${4:#fcfcfc};
}
$5
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>setbody</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.css</scope>
</snippet>

ヒットTabしてスニペットをトリガーする#b3b3b3と、borderプロパティ内の が強調表示され、編集できるようになります。完了したら、Tabもう一度 を押してbox-shadow、 などの最初の色の定義に移動します。最終的Tabには括弧の外に出て、次のセレクターの準備が整います。