sassのわかりやすい記法について教えてください

はじめて質問させて頂きます。
ブログの作成を通じてCSSデザインの楽しさを知り、独学で学習をしているものです。
文字の色指定や強調などを複数の場所に行う際、同じようなコードが並んでいると訂正が出た際に困るかも…と考え、調べてみたところ、他の質問サイトでsass記法というものがあることを教えていただきました。(現在は解決済みになっています。)
その後、sassの書籍を読みつつ学んでいましたが、記法についてつまずいてしまった部分があったので、お尋ねした次第です。

CSS
1.marker-pink {
2background: linear-gradient(transparent 60%, #ff99cc 60%);
3}
4.marker-purple {
5background: linear-gradient(transparent 60%, #cc99ff 60%);
6}
7.marker-orange {
8background: linear-gradient(transparent 60%, #ffa500 60%);
9}
10

このような、文字にラインマーカー風の線を引くCSS(色のみ違う)が多数並んでいるものを、sassでかきたいと思っているのですが…

Sass
1$nameList:pink, purple, orange, blue, green;
2$colorList:#ff99cc, #cc99ff, #ffa500, #99ccff, #5bed3b;
3
4
5@each $class in $nameList { $index : index($nameList, $class); 
6.marker-#{$class} { background: linear-gradient(transparent 60%, nth($colorList, $index) 60%;
7
8} }

このコードの".marker〜よりあとの部分でどうしてもエラーが出てしまいます。
(sassをCSSに変換するサイトに通すと、invalid CSSと出てきます。)
おそらく、ネストに係るカッコの対応関係にミスがあるのかと睨んでおりますが、どうしても正解に辿りつけず困ってしまいました。

初歩的な質問で大変申し訳ありませんが、もしよろしければ、お知恵をお貸しいただければ幸いです。よろしくお願いいたします。

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

回答1件

ベストアンサー

こんにちは

挙げられているSCSS

SCSS
1@each $class in $nameList { $index : index($nameList, $class); 
2.marker-#{$class} { background: linear-gradient(transparent 60%, nth($colorList, $index) 60%;
3
4} }