10

サイトで使用するアイコン フォント ルールをいくつか作成しています。Sass を使用して、すべてのアイコンをリスト変数にリストし、@each を使用してそれらすべてをループ処理したいと考えました。

コードは次のようになります。

$icons: 
    wifi 600,
    wifi-hotspot 601,
    weather 602;

@each $icon in $icons {
    .icon-#{nth($icon, 1)}, 
    %icon-#{nth($icon, 1)} {
        content: "\#{nth($icon, 2)}";
    }
}

問題はcontent:行のバックスラッシュです。文字エンコーディングに必要ですが、変数補間をエスケープし、次のような CSS を出力します。

.icon-wifi {
  content: "\#{nth($icon, 2)}";
}

次のようにバックスラッシュをもう 1 つ追加すると、次のcontent: "\\#{nth($icon, 2)}";CSS が出力されます。

.icon-wifi {
  content: "\\600";
}

変数補間を維持しながら、バックスラッシュを 1 つだけ使用して Sass に CSS を出力させる方法はありますか?

4

6 に答える 6

9

補間をいじることでこれを機能させました

sassmesiter デモ

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

$icons: 
    wifi 600,
    wifi-hotspot 601,
    weather 602;

@each $icon in $icons {
    .icon-#{nth($icon, 1)}, 
    %icon-#{nth($icon, 1)} {
        content: #{'"\\' + nth($icon, 2) + '"'}; // <------ See this line
    }
}

にコンパイルします

.icon-wifi {
  content: "\600";
}

.icon-wifi-hotspot {
  content: "\601";
}

.icon-weather {
  content: "\602";
}
于 2017-07-27T04:24:16.420 に答える
7

実際の変数にバックスラッシュを含めると、sass が css を生成するときに、css 出力に unicode を出力する代わりに、計算された unicode 文字が実際に生成されます。これでも通常は機能しますが、何か問題が発生した場合にデバッグするのは難しく、ブラウザでアイコンをレンダリングする際に問題が発生する可能性が少し高くなります。

生成された CSS で実際の Unicode を出力するには、次のようにします。

@function icon($character){
    @return unquote('\"') + unquote(str-insert($character,'\\', 1)) + unquote('\"');
}

$icon-thing: "e60f";

.icon-thing:before {
    content: icon($icon-thing); //outputs content: "\e60f";
}
于 2016-03-07T00:52:19.537 に答える
2

変数のパラメータにバックスラッシュを追加でき $iconsます。あれは、

$icons: wifi "\600", wifi-hotspot "\601", weather "\602";

@each $icon in $icons {
  .icon-#{nth($icon, 1)}, %icon-#{nth($icon, 1)} {
    content: "#{nth($icon, 2)}";
  }
}

生成された CSS:

.icon-wifi {
  content: "\600"; 
}

.icon-wifi-hotspot {
  content: "\601"; 
}

.icon-weather {
  content: "\602"; 
}
于 2014-02-06T16:56:35.600 に答える