SASS HEX в RGB без префикса «rgb»

Вопрос:

Существует ли функция/техника SASS, которая преобразует шестнадцатеричное значение в простую строку RGB.

Simple здесь означает просто строку, не заключенную в rgb() ?

E.g: #D50000 --> "213,0,0"

Зачем мне это нужно:

Я использую Material Design Lite в качестве своего пользовательского интерфейса. В частности, я использую версию SASS, поэтому я могу настроить цветовые переменные в соответствии с руководством по стилю моего приложения.

По какой-то причине цветовые переменные в _variables.scss MDL принимают этот формат для определения цвета:

$color-primary: "0,0,0" !default; // supposed to be black

что действительно очень странно. Я ожидал, максимум, что-то вроде

$color-primary: rgba(0,0,0,1) !default;

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

$brand-primary: #FA3166;
$brand-primary-dark: #E02C59;

Я не хочу определять 2 раза мои цвета (1 HEX и 1 MDL-совместимая строка RGB), поэтому мне нужно преобразовать HEX в строку RGB.


material-design sass material-design-lite
person nicholaswmin    schedule 04.10.2015    source источник
comment
Вам следует подумать о том, чтобы не использовать такую ​​дрянную библиотеку. Это ужасный анти-паттерн. Гуглу должно быть стыдно за это.   -  person cimmanon    schedule 04.10.2015
comment
Вы использовали его широко? Или вы судите по этому аспекту? Я спрашиваю, потому что я (хочу) верить, что я просто следую неправильному подходу к настройке палитры   -  person nicholaswmin    schedule 04.10.2015
comment
Я просмотрел источник. Никто в здравом уме не стал бы обращаться с такими цветами. То, что они делают, похоже на использование строк для обработки валюты.   -  person cimmanon    schedule 04.10.2015
comment
@cimmanon Я думаю, что на самом деле для этого есть причина, и дело в том, что мне не хватает правильного пути для определения цветов. Я открыл вопрос Github здесь с тем же вопросом   -  person nicholaswmin    schedule 04.10.2015
comment
Единственная причина сделать это — заставить его выводить в формате RGB (см.: stackoverflow.com/questions/15757665/). Это просто исключительно ужасный способ сделать это.   -  person cimmanon    schedule 04.10.2015

Ответы (2)


arrow_upward
3
arrow_downward

Ответ @nicholas-kyriakides работает отлично, но вот более краткая функция, использующая интерполяцию Sass.

@function hexToRGBString($hexColor) {
  @return "#{red($hexColor)},#{green($hexColor)},#{blue($hexColor)}";
}

Вы можете передать либо шестнадцатеричный код, либо явным образом, либо из rgb() или rgba() с непрозрачностью, равной 1.

Например:

$color-white: hexToRGBString(#fff) => "255,255,255"
$color-white: hexToRGBString(rgb(255,255,255)) => "255,255,255"
$color-white: hexToRGBString(rgba(#fff,1)) => "255,255,255"
person Justin    schedule 06.10.2016
comment
Обратите внимание, что вам может понадобиться добавить round, чтобы избежать недопустимых значений в вашем rgb(), если вы изменяете свои шестнадцатеричные значения, например, с помощью lighten или darken. Например: @return "#{round(red($hexColor))},#{round(green($hexColor))},#{round(blue($hexColor))}"; - person Nicd; 18.07.2017

arrow_upward
1
arrow_downward

Я взломал его с помощью функции SASS:

@function hexToString($hexColor) {

  // 0.999999 val in alpha actually compiles to 1.0
  $rgbaVal: inspect(rgba($hexColor,0.9999999));

  // slice substring between 'rgba(' and '1.0)' 
  @return str-slice($rgbaVal, 6, str-length($rgbaVal)-6);

}

Применение:

$brand-primary: #333;
$color-primary: hexToString($brand-primary);

Я думаю, что команда MDL намеревалась иметь другой способ настройки палитры, и я его упускаю, поэтому, если кто-то знает лучший способ настроить палитру MDL, я открыт для предложений. В любом случае это решает исходный вопрос.

person nicholaswmin    schedule 04.10.2015
comment
Интересно, есть ли менее хакерский способ, чем использование альфа-значения 0,99999. в функции rgba(). У меня есть случай, когда мне явно нужно значение rgb или rgba, потому что встроенный svg задыхается от неэкранированного символа «#». - person David T; 04.12.2015