質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.12%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,258

muro

score 107

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を出力できるようになるのでしょうか?
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

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

// 拡張子は.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に変えてからは二つ出力されるようになってしまい、今回の件となりました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

-1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/30 13:04 編集

    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";
    }

    キャンセル

  • 2015/07/31 13:08

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

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる