---

このエントリーは、膨大にあるSublime Textのパッケージ群の中で、執筆に参加した『Web制作者のためのSublime Textの教科書』の中で紹介していないパッケージのList stylesheet variablesを取り上げます。

監修のこもりさんが、Web制作者のためのSublime Textの教科書のFacebookページにて書籍に掲載していないパッケージを続々紹介しているのですが、そこでList stylesheet variablesが取り上げられました。

"インストールしてプリプロセッサのファイルを開いて、「Ctrl＋Option＋Lキー（Windowsの方は、Ctrl＋Alt＋Lキー）」を押すとあら不思議、定義済みの変数がわらわらとリストされます。もちろん絞り込みもできるので、選択してEnterキーを押せばキャレットの位置に挿入されます。"

ということで、パッケージをインストールしてしまえばもう利用できるものなんですが、もう少し詳しく紹介します。

定義した変数の一覧を表示してくれる

CSSプリプロセッサーに限らず、「あれ？変数名なんだったっけ？」ということはどうしてもつきまといます。命名規則をかっちりしていても出てきますし、フレームワークなど利用しているとなおさらです。それを補助するのがこのパッケージです。

コードの入力中にMac:[control] + [option] + [L] / Windows:[Ctrl] + [Alt] + [L]で、変数の一覧が表示されます。

---

---

また、文字列を入力することで絞り込みも可能です。

---

---

## Sass/Less/Stylusに対応

現在Sass/Less/Stylusに対応しています。一応私はBootstrapのSass(.scss)とLessで確認しましたが、問題なく動作しています。

---

---

利用上のTipsなど

importにも対応していますので、外部に変数定義のファイルが存在していても利用できます。ただし、importで読み込む対象は同一のディレクトリに存在するものに限られるようです。その場合、パッケージの設定で

"readAllViews": true

とすると、開いているファイルから変数のリストを生成するので、ディレクトリ構造をもつプリプロセッサーのファイル群を構成している場合はreadAllViewsをtrueに設定してください（デフォルトはfalse）。その上で変数定義のファイルを開いた状態で利用できるようになります。

---

---

オススメです

書籍には掲載していないですが、CSSプリプロセッサーを利用される方にはとても有効なパッケージでしょう。こんな感じでこれからも様々な事情で書籍内では紹介できなかったパッケージでいいものを紹介できればと思います。

また、監修のこもりさんもWeb制作者のためのSublime Textの教科書のFacebookページにてどんどん書籍未掲載のパッケージを紹介していますのでぜひご参照ください。

---