如何在SASS中将整数转换为十六进制

Question

代替Chris Eppstein在SASS正在进行的工作中提到的类似Map数据结构的方法，我正在尝试实现类似的方法-将字符串映射到相应的十六进制值，该值将用于指定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中将整数转换为十六进制字符串吗？有另一种优雅的方法吗？

Answer 1

要回答您帖子中的最后一个问题，“在SASS中是否存在将整数转换为十六进制字符串的事情？”。好吧……不是内置的，但是我认为这可以用很少的代码行就很清楚了：

/** Returns an at least one byte hex value */
@function dec-to-hex($d) {
    $hexVals: "A" "B" "C" "D" "E" "F";
    $base: 16;
    $quotient: $d;
    $result: "";
    @if $d == 0 {
        $result: "00";
    }
    @while $quotient != 0 {
        $mod: $quotient % $base;
        $quotient: floor($quotient / $base);
        @if $mod > 9 {
            $mod: nth($hexVals, $mod - 9);
        }
        @if $d < $base {
            $result: "0" + $mod;
        } @else {
            $result: $mod + $result;
        }
    }
    @return $result;
}

这不会在字符串前添加十六进制限定符（例如“ 0x”或“＃”），但是您可以将其硬编码到最后一行（@return "#" + $result;）中，也可以在调用函数时就地应用它。

Answer 2

我会这样做：

$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)