Как преобразовать целое число в шестнадцатеричное в SASS

Вместо чего-то вроде структуры данных карты, которую Крис Эппштейн упоминает как незавершенную для SASS, я пытаюсь чтобы добиться чего-то подобного - сопоставьте строку с соответствующим шестнадцатеричным значением, которое будет использоваться для указания символа юникода для свойства CSS content. (Я пытаюсь реорганизовать код 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? Есть ли другой элегантный способ обойти это?


person Prembo    schedule 12.04.2013    source источник


Ответы (5)


я бы сделал так:

$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)
person bookcasey    schedule 12.04.2013
comment
Чего я пытался добиться, так это сделать миксин более интуитивно понятным, имея возможность просто указать значок, используя имя через миксин. Например. font-icon(copyright); На данный момент миксин требует, чтобы вы указали имя и соответствующий символ Юникода, например: font-icon(calendar, "008");. - person Prembo; 12.04.2013
comment
Спасибо - отличный обходной путь, учитывая ограничения (например, отсутствие карты/хэша). Мне это нравится! - person Prembo; 12.04.2013
comment
Я попал сюда, потому что пытался преобразовать целое число в шестнадцатеричное в SASS, на что этот принятый ответ не отвечает! - person Sorin GFS; 23.01.2021

Чтобы ответить на последний вопрос в вашем посте: «Есть ли что-нибудь, что преобразует целое число в шестнадцатеричную строку в 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;), либо применить его на месте при вызове функции .

person JPGringo    schedule 01.11.2013
comment
Спасибо за эту функцию. Удивлен, что что-то подобное еще не встроено в SASS. - person Prembo; 11.03.2015
comment
Этот ответ был процитирован в этом запросе функции в репозитории SASS. - person luukvhoudt; 16.12.2017

Еще одна реализация последнего вопроса в вашем посте: «Есть ли что-нибудь, что выполняет преобразование целых чисел в шестнадцатеричные строки в SASS?» это самая короткая версия (не работает в самой старой версии, потому что может отсутствовать 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)
}
person Pierpaolo Cira    schedule 27.11.2015
comment
Этот ответ был процитирован в этом запросе функции в репозитории SASS. - person luukvhoudt; 16.12.2017

Предыдущие ответы не сработали для нас, поэтому вот две быстрые функции для преобразования целого числа в несколько разных оснований, включая шестнадцатеричное:

@function decimal-to-base($decimal, $to_base, $chars: '0123456789abcdefghijklmnopqrstuvwxyz')
  @if type-of($decimal) != 'number'
    @error '$decimal must be an integer.'
  @if type-of($to_base) != 'number'
    @error '$to-base must be an integer.'
  @if type-of($chars) != 'string'
    @error '$chars must be a string.'
  @if $to_base < 2
    @error '$to-base must be larger than 1.'
  @if $to_base > str-length($chars)
    @error 'Length of $chars must be equal or larger than $to-base.'
  @return _decimal-to-base($decimal, $to_base, $chars)

@function _decimal-to-base($decimal, $to_base, $chars, $_accum: '')
  @if $decimal <= 0
    @return if($_accum != '', $_accum, '0')
  $remainder: $decimal % $to_base
  $char: str-slice($chars, $remainder + 1, $remainder + 1)
  $remaining_decimal: ($decimal - $remainder) / $to_base
  @return _decimal-to-base($remaining_decimal, $to_base, $chars, $char + $_accum)

Если вас не волнует обработка ошибок, вы можете пропустить длинную первую функцию (которая на самом деле только проверяет аргументы и устанавливает символы по умолчанию) и просто скопируйте вторую функцию.

Также обратите внимание, что это написано в SASS, а не в SCSS. Для поддержки SCSS вам нужно добавить несколько фигурных скобок и точек с запятой.

Примеры:

  • Десятичный в шестнадцатеричный:
    decimal-to-base(15731618, 16) // "f00ba2".

  • Десятичный в двоичный:
    decimal-to-base(34, 2) // "100010".

  • Отметка времени для строки запроса:
    decimal-to-base(1547598870, 2) // "pleb0y".

  • Определенно не азбука Морзе:
    decimal-to-base(34, 2, '-.') // "-...-.".

  • Преобразование целого числа в строку:
    decimal-to-base(123456, 10) // "123456".

Известные предостережения: (потому что это грязная реализация)

  • Входное десятичное число должно быть целым числом >= 0.
  • Минимальная база 2.
  • Вы должны быть осторожны с большими целыми числами.
person EchoCrow    schedule 16.01.2019

Мои функции для изменения чисел туда и обратно между шестнадцатеричными и десятичными числами

$hex-chars: "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F";

@function dec-to-hex($d) {
    $result: "";
    $rest: $d;
    @while $rest > 0 {
        $result: nth($hex-chars, $rest % 16 + 1) + $result;
        $rest: floor($rest / 16);
    }
    @return $result;
}

@function pow($number, $exponent) {
    $value: 1;
    @if $exponent > 0 {
        @for $i from 1 through $exponent {
            $value: $value * $number;
        }
    }
    @return $value;
}

@function hex-to-dec($d) {
    $result: 0;
    $number: inspect($d);
    $power: 0;
    @for $index from str-length($number) through 1 {
        $digit: str-slice($number, $index, $index);
        $value: index($hex-chars, $digit) - 1;
        $result: $result + ($value * pow(16, $power) );
        $power: $power + 1;
    }
    @return $result;
}

Десятичное число считается числом, а шестнадцатеричное — строкой.

person Jan Stanicek    schedule 06.05.2020