5

Chris Eppstein が SASS の進行中の作業として言及しているMap データ構造のようなものの代わりに、私は同様のことを達成しようとしています - 文字列を対応する 16 進値にマッピングします。これは、CSS の Unicode 文字を指定するために使用されます。コンテンツプロパティ。(フォント アイコンの SASS コードをリファクタリングしようとしています。)

現時点では、次のような初歩的なものがあります。

/*icon1  -->  \F000
  icon2  -->  \F001
  icon3  -->  \F002*/

@function u-char($name) {
    @if $name == icon1 {
        @return "000";
    } @else if $name == icon2 {
        @return "001";
    } @else if $name == icon3 {
        @return "001";
    }
}

@mixin icon-class($name) {
    ...
    content: "\f#{u-char($name)}";
    ...
}

しかし、実際には多数の文字をマッピングしようとしているので、このアプローチは困難です。私は次のようなことができることを望んでいました：

@function u-char($name) {
    $i: 0;
    $itemList: item1, item2, item3;

    @each $currItem in $itemList {
        @if $name == item1 {
            @return i-to-hex-str($i);
        }
        $i: $i + 1;
    }
}

SASSで整数から16進文字列への変換を行うものはありますか? これを回避する別のエレガントな方法はありますか？

4

5 に答える 5

2

投稿の最後の質問の別の実装:「SASS で整数から 16 進文字列への変換を行うものはありますか?」これは最も短いバージョンです (str-slice が欠落している可能性があるため、最も古いバージョンでは動作しません)。

@function decToHex($dec) {
    $hex: "0123456789ABCDEF";
    $first: (($dec - $dec % 16)/16)+1;
    $second: ($dec % 16)+1;
    @return str-slice($hex, $first, $first) + str-slice($hex, $second, $second)
}
于 2015-11-27T15:10:00.653 に答える
-1

私はこれを行います：

$icons: "000", "001", "002";

@function icon($i) {
  @return "\F#{nth($icons, 1)}";
}

h1::before {
  content: icon(1);
}

編集：

単語を値に関連付けたい場合は、リストのリストを使用してそれらを繰り返してみてください。これが非常に効率的なふりをするつもりはありませんが、うまくいきます。Sass にハッシュがあればいいのですが。

$icons: '000' calendar, '001' inbox, '002' home

@function icon($call)
  @for $i from 1 through length($icons)
    @if $call == nth(nth($icons, $i), 2)
      @return "\F#{nth(nth($icons, $i), 1)}"

h1::before
  content: icon(calendar)
于 2013-04-12T01:07:33.297 に答える