Emmet記法で、＄を使ってHTMLようにCSSでクラス名の番号に連番を振りたい

質問失礼します。下記のこと教えていただけたら嬉しいです。

### 前提・実現したいこと###
Emmet記法で、HTMLようにCSSでクラス名の番号に連番を振りたいです。
また色の指定の番号も変化させて表示させることは可能でしょうか。

ググってみて出てきたように
{.item-$ {background:;}}*9
を試してみましたが、連番で複製されませんでした。

よろしくお願いします。m(_ _)m

■実現したいソースコード
.item-1 {
background: hsl(300, 80%, 30%);
}
.item-2 {
background: hsl(300, 80%, 40%);
}
.item-3 {
background: hsl(300, 80%, 50%);
}
.item-4 {
background: hsl(200, 80%, 30%);
}
.item-5 {
background: hsl(200, 80%, 40%);
}
.item-6 {
background: hsl(200, 80%, 50%);
}
.item-7 {
background: hsl(100, 80%, 30%);
}
.item-8 {
background: hsl(100, 80%, 40%);
}
.item-9 {
background: hsl(100, 80%, 50%);
}

■言語名：CSS

■Editor VScode
OS Max OS x

行動規範の内容に同意します

回答1件

ベストアンサー

VScodeのEmmet記法は実装されていない記法があり、
{.item-$ {background:;}}*9の記法は展開できないようになっています。
Sublime Textなどほかのエディタでは展開できるので
{.item-$ {background:;}}*9を展開するのであれば
ほかの展開可能なエディタを使用する必要があります。

あと「実現したいソースコード」はEmmetでは
計算して展開することはできないので実現不可能です。

できるのは下記の範囲までです。

css
1/* 展開前 */
2{.item-$ {background: hsl(300, 80%, 30%);}}*9
3
4/* 展開後 */
5.item-1 {background: hsl(300, 80%, 30%);}
6.item-2 {background: hsl(300, 80%, 30%);}
7.item-3 {background: hsl(300, 80%, 30%);}
8.item-4 {background: hsl(300, 80%, 30%);}
9.item-5 {background: hsl(300, 80%, 30%);}
10.item-6 {background: hsl(300, 80%, 30%);}
11.item-7 {background: hsl(300, 80%, 30%);}
12.item-8 {background: hsl(300, 80%, 30%);}
13.item-9 {background: hsl(300, 80%, 30%);}