Sassといえばネスト・extend・mixinなど、効率的にCSSを記述することができる機能が多数あります。その中のひとつに親セレクタの参照や疑似クラスを指定するために使用する機会も多いと思う&（アンパサンド）というものがありますが、これをBracketsのエクステンションと組み合わせて疑似クラス指定をより楽に記述していく方法を紹介します。
例えば&:nth-of-type(), &:first-child, &:not(:first-child)などの擬似クラスを利用する機会が多い場合、使用する度に毎回入力していくのは割と面倒です。
そこで、今回はBrackets Snippets (by edc)というBracketsのエクステンションを用いて、この&（アンパサンド）を使った擬似クラス指定を少しでも楽になるようにしていきます。
Brackets Snippets (by edc)については以下でインストールから使い方までをひと通り紹介しているので、知らない方はこちらをご覧ください。
スニペットを登録する
スニペットを登録する際はBracketsでエディタ右に表示されている電球のようなアイコンをクリックしてBrackets Snippets (by edc)を起動し、画面左の「Snippets Manager」の見出し下にある「New+」ボタンからスニペットを登録していきます。
ここでは例として、使用頻度も高いと思う::afterをスニペット登録する形で使用方法などを紹介していきます。
また、以下で紹介している内容はSCSSを利用している想定になりますので、環境によっては一部変更する必要があります。
上のイメージにあるように「Trigger」が&after、「Description（Optinal）」が&::after、「Scope」がSCSSとそれぞれ入力・選択し、一番下の「Text」には下記のような記述をしておきます。
「Text」に入力している${1}というのはこのエクステンションで使用できるCursor機能を使用するために必要な記述で、このようにしておくことでスニペット展開時にこの部分にカーソルがいくように設定することができます。
&::after {
content: '';
${1}
}上記登録後、実際にSCSSで&を入力するとその時点で下のイメージ左のようにヒントが表示されるのが確認でき、あとはEnterで選択すれなどすれば先ほど「Text」で登録しておいた内容がイメージ右にあるようにパッと表示されます。
また、展開後のカーソルも先ほど登録しておいた${1}の箇所になっているのも確認できると思います。
ちなみに、自分は普段から::after擬似要素使うときにcontentの値は空にすることが多いので今回はcontent: '';の次の行にカーソルを移動させてますが、逆に普段からcontentに何か記述することが多いのであれば、登録時にcontent: '${1}';のように記述することで展開後にcontentの値をすぐ変更できるような形で展開させることができます。
せっかくなのでもうひとつ登録例を紹介で、次は:nth-childを登録してみます。
「New+」ボタンから新しいスニペットを作成し、「Trigger」が&nthc、「Description（Optinal）」が&:nth-childとそれぞれ入力し、「Scope」は先ほどと同じくSCSSを選択していきます。
「Trigger」を&nthcとしているのは、自分が例えば:nth-last-childを&nthlc、:nth-of-typeを&nthtという感じで登録しているのでこのようにしていますが、自分がわかりやすいものにしてください。
あとは、一番下の「Text」には下記のような記述をし、こちらもCursor機能を使用するために必要な記述をしておきます。
&:nth-child(${1}) {
${2}
}上記登録後、先ほどの&afterの時と同じように&を入力すると&nthcがヒント表示の中に追加されていて、展開するとまずは下のイメージのように:nth-childでn番目を指定できる()の中にカーソルが表示されており、更にショートカットでカーソルを移動すればスタイルを記述していく箇所に移動するという動きを確認できます。
このCursor機能は必要なければもちろん使用しないでも良いですが、このようにしておくことで「スニペット展開でn番目の要素か指定して、その後ショートカットを使ってカーソル移動してスタイルを記述」という流れを作ることができるので、個人的には慣れれば便利だと思います。
ひと通り登録したときのイメージ
上で紹介した手順で&:nth-of-type()や&:not(:first-child)といったものもひと通り登録すると、イメージのように&と入力するだけで様々なヒントが表示されるようになります。
今回紹介してきたのはBrackets・Brackets Snippets (by edc)・Sassを使っているのが前提にはなりますが、これらを普段から使用しているのであれば地味に便利だと思うので、自分と同じように毎回入力が手間だとか少しでも楽したいと思う人は是非試してみてください。