如何在SASS中将整数转换为十六进制 [英] How to convert integer to hex in SASS

问题描述

代替Chris Eppstein提到的地图数据结构之类的东西，我我正在尝试实现类似的功能-将字符串映射到相应的十六进制值，该值将用于为CSS content 属性指定unicode字符.(我正在尝试重构一些字体图标的SASS代码.)

In lieu of something like the Map data structure that Chris Eppstein mentions as a work in progress for SASS, I'm trying to achieve something similar - mapping a string to a corresponding hex value, which will be used to specify a unicode character for CSS content property. (I'm trying to refactor some font icon SASS code.)

此刻，我有一些基本的东西:

At the moment I have something rudimentary like:

/*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)}";
    ...
}

但是我实际上是在尝试映射大量字符，因此这种方法很麻烦.我希望能够做类似的事情:

But I'm actually trying to map a large number of characters, so this approach is arduous. I was hoping to be able to do something like:

@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中是否有任何东西可以将整数转换为十六进制字符串?是否有另一种优雅的方法?

Is there anything that does and integer to hex string conversion in SASS? Is there another elegant way around this?

推荐答案

我会这样做:

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

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

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

如果要将单词与值相关联，请尝试使用列表列表并对其进行迭代.我不会假装这是非常有效的，但是可以.如果Sass有哈希值，那就太好了.

If you want to associate a word with a value, try using a list of lists and iterating through them. I'm not going to pretend this is very efficient, but it works. It would be nice if Sass had hashes.

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

这篇关于如何在SASS中将整数转换为十六进制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！