タグ: CSS

Autoprefixer

煩雑な CSS のベンダープリフィックスの入力サポート機能を提供するパッケージ。

カーソルのある行の設定に対してベンダープリフィックスを自動で補完してくれる「 Autoprefix CSS 」コマンドを提供します。

ただ、ベンダープリフィックスについては AltCSS / PostCSS などの仕組みを使って裏側で補完しておく形の方が間違いがなく便利なので、個人的にはこのパッケージよりもそういったツールを使う方がよいように思います。

Bootstrap 3 Snippets

(説明なし)

CSS Snippets

定番の CSS コードを手軽に入力できる各種スニペットを提供するパッケージ。

CSS の他にも Sass や LESS 、 Stylus などもサポートしているようです。

CSS3

(説明なし)

CSScomb

CSS を自動整形するツール「 CSScomb 」を Sublime Text に連携するパッケージです。

「 Run CSScomb 」( css_comb )コマンドを実行すれば、現在開いている CSS ファイルを csscomb コマンドで整形してくれます。

Can I Use

Can I use ですばやく調べられるショートカットやコンテクストメニューを提供するパッケージ。

Emmet

省略記法を使った HTML 記述機能を提供する Emmet の Sublime Text 用パッケージ。

ちなみに Emmet は以前は「 Zen-Coding 」と呼ばれていました。

Emmet Css Snippets

Emmet スタイルで CSS をすばやく入力できる各種スニペットを提供するパッケージ。

具体的にどのような形で補完がきくのかについては公式のサイトで事前に確認することができます。

Emmet Style Reflector

Emmet 風のネストの展開機能を Sass / LESS に対して利用できるようになるパッケージ。

個人的には使っていませんが、慣れて使いこなせるようになると便利そうです。

HTML-CSS-JS Prettify

HTML と CSS 、 JavaScript ファイル用の整形機能を提供するパッケージです。

Hayaku - tools for writing CSS faster

CSS をすばやく入力できる機能を提供するパッケージです。

たとえば oh と入力して Tab を入力すると overflow: hidden; に置き換わるといった感じで、少ないタイプ数で定番のスタイルを素早く正確に入力することができます。

その他公式ページでは次のような展開パターンが紹介されています。

w10 → width: 10px
h2pt → height:2pt
c0 → color: #000
cFA → color: #FAFAFA

単純に補完が効いて素早いというだけでなく、間違いなく正確に入力できる点がメリットです。

Stylus

Sass や SCSS と同じく CSS をよりかんたんに記述できる記法「 Stylus 」ファイルのシンタックスハイライト機能とビルド機能を提供するパッケージ。

動作させるには npm パッケージの stylus が必要です。 プロジェクトごとに異なる設定を行うことなどもできるようです。

Sublime​Linter-contrib-stylelint

SublimeLinter プラグイン。 stylelint で CSS ファイルのリンティングを行う機能を提供します。

Sublime​Linter-csslint

SublimeLinter プラグイン。 npm パッケージ csslint で CSS ファイルのコードチェックを行う機能を提供します。

これから新たに導入するのであれば stylelint に対応した Sublime​Linter-contrib-stylelint の方がよいかもしれません。