sassでバックスラッシュ(円マーク)が二つ出力されてしまう

Question

gulpとsassを使って、olリストのアイコンを連番の丸数字にするcssを作成しようと考えています。
下記のようなリストです。

① 項目1
② 項目2
③ 項目3

---

これを実現するために以下のようなhtmlとgulpfileとsassを作成しました。
なお、sassからcssに変換するために使用しているプラグインは、gulp-sassです。

# gulpfile.coffee
gulp = require("gulp")
plugins = require("gulp-load-plugins")()

gulp.task "sass", ->
	gulp.src("**.sass")
		.pipe plugins.plumber
			errorHandler: plugins.notify.onError("Error: <%= error.message %>")
		.pipe plugins.sourcemaps.init()
		.pipe plugins.sass
			outputStyle: 'expanded'
		.pipe plugins.autoprefixer()
		.pipe plugins.sourcemaps.write "./"
		.pipe gulp.dest("./")

gulp.task "default", ->
	gulp.watch "**/*.sass", ["sass"]

<ol class="list">
	<li class="item">項目1</li>
	<li class="item">項目2</li>
	<li class="item">項目3</li>
</ol>

//拡張子はscssではなくsassです。
.list
	list-style-type: none
.item
	@for $i from 1 through 3
		$counter: 2459 + $i
		&:nth-of-type(#{$i})
			&:before
				content: "\0#{$counter}"

contentに直接丸数字を入れるのではなく、数値文字参照を入れている理由としては、liが増減したときに、forのカウントだけ変えれば済むようにしたかったためです。
\02460が①を表し、今回はliの数が3つなので数値文字参照は\02460～\02462、つまりブラウザ上では①～③が出力されるはずです。
(環境によってはバックスラッシュが円マークになりますが、以下バックスラッシュで呼びます)

---

しかし、実際にgulpを立ち上げ、sassを保存してcssに変換させると、下記の出力結果になりました。

.list {
	list-style-type: none;
}

.item:nth-of-type(1):before {
	content: "\\02460";
}

.item:nth-of-type(2):before {
	content: "\\02461";
}

.item:nth-of-type(3):before {
	content: "\\02462";
}

それぞれバックスラッシュを一つしか入れていないのに、バックスラッシュが二つ出力されてしまいました。
また、いちおうブラウザで表示してみると、下記のような結果になり、望んでいたものとは異なります。

\02460 項目1
\02461 項目2
\02462 項目3

このままだと、sassを保存する度に、cssからバックスラッシュを一つ取り除く作業をしなければいけないので、非常に困ります。
どうしたらバックスラッシュを二つにすることなくcssを出力できるようになるのでしょうか？

Answer 1

バックスラッシュが二つ出力されてしまう問題は解決できずじまいですが、代替策を思いつきましたので、今回はこれで対応したいと思います。
引数を渡すと、それに応じた丸数字を返すという処理です。

// 拡張子は.scssではなく.sassです

=circle_number($number)
	@if $number == 1
		content: "①"
	@elseif $number == 2
		content: "②"
	@elseif $number == 3
		content: "③"
		
.list
	list-style-type: none
.item
	@for $i from 1 through 3
		&:nth-of-type(#{$i})
			&:before
				+circle_number($i)

/* 出力結果 */
.list {
	list-style-type: none;
}

.item:nth-of-type(1):before {
	content: "①";
}

.item:nth-of-type(2):before {
	content: "②";
}

.item:nth-of-type(3):before {
	content: "③";
}

余談ですが、今回の問題が発生した経緯について。

もともとはsassをcssに変換するのに、adobe bracketsのプラグインである、brackets-sassを使用していましが、sassの変換がエディタに依存することになるので、もしエディタを変えたくなったときにまずいと思い、gulp-sassに変更しました。
しかし、brackets-sassのときはバックスラッシュはそのまま一つで出力されたのに対し、gulp-sassに変えてからは二つ出力されるようになってしまい、今回の件となりました。

Answer 2

エスケープの問題ですので、「”」（ダブルクオート）を使わずに「’」（シングルクオート）で使用する事となります。
その代わり$counterが展開されなくなるので、それはシングルクオートから外して、文字列として連結させれば解決すると思います。

Comments

[muro]

sassのコードを以下のように変更して、css変換を行ってみました。
(ここのコメントだと行頭のスペースが使えないので、代わりにアンダーバーで置き換えています)

.item
__@for $i from 1 through 9
____$counter: 2459 + $i
____&:nth-of-type(#{$i})
______&:before
________content: '\0' + $counter

しかしcssの出力結果は、\0で表示されてほしいところが、�になってしまいました。

.item:nth-of-type(1):before {
__content: "�2460";
}
.item:nth-of-type(2):before {
__content: "�2461";
}
.item:nth-of-type(3):before {
__content: "�2462";
}

[muro]

まだ解決できていませんが、一つ気づいた点があったので、報告しておきます。

content: '\2460'
このように変数ではなく直接入力にしてcss変換すると、丸数字に置き換わりました。
前回、�になった理由としては、\0で認識されてしまったと考えられます。

しかし、変数を#{ }で囲ってダブルクオート内に入れたときと、ダブルクオートの外に+で変数を連結させたときで、出力結果が異なるのが奇妙です…。