⌘B(ctrl+B)でCSSの定義箇所にジャンプする
HTMLのクラスにカーソルを当てた状態で⌘B(ctrl+B)でクラスに適用されているCSSがどの箇所にあるのか表示することができます。
例えば、class="header"にカーソルを当てた状態で実行すると、その定義箇所が.c .header /path/to/style.scss: 100のような形式で、ファイル名と行数を表示してくれます。複数候補がある場合は矢印キーで移動してエンターを押すことで該当の箇所が開きます。対象のファイルを開いているかによって挙動が少し変わるので要注意です。
- 対象のファイルがタブ上にある場合 => ファイルを表示して、該当する行まで移動します。
- 対象のファイルがタブ上にない場合 => ファイルを開いて、該当する行まで移動します。
- 対象のファイルが複数開かれている場合 => 直近で選択していたファイル側のタブで、ファイルを表示して該当する行まで移動します。
BEMを&__Element、&--modifierにしない
Sassを使う場合、BEMを以下のように書くことができますが、上記の⌘B(ctrl+B)が効かなくなるので、&で連結せずに書く方がコーディングしやすいです。
.block {
// block style
&__element {
// element style
&--modifier {
// modifier style
}
}
}
Sassで変数をネストしない
Sassのmap-get関数を使うと、ネストされた変数を利用できますが、下記のように書くと$text-colorは補完されますが、blackは補完されません。map-getを使うたびに定義を見に行くのは面倒なので、変数はネストしない方がちょっと楽です。（map-getを使っても色はきちんと表示されます。）
$text-color: (
black: #333
);
@debug map-get($text-color, black); // #333
package.jsonを右クリックしてタスクリストを表示・実行する
package.json, gulpfile.js, Gruntfile.jsは右クリックするとshow npm Scripts（package.jsonの場合）が表示され、クリックすると、タスク一覧を確認することができます。また、タスクが選択されている状態でエンター、もしくはタスクをダブルクリックするとRunペイン（`⌘4(ctrl+4)）で実行されます。コマンドを打つときにタスク名を確認する必要がなくなるので少し楽になります。