SASS HEX в RGB без '' RgB префикса

Question

Вопрос:

Есть SASS функция/метод, который преобразует значение HEX к RGB строке простого.

Простые здесь означают только строку без ее включения в rgb()?

например: #D50000 --> "213,0,0"

---

Почему мне это нужно:

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

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

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

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

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

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

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

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

Answer 1

Я взломал вокруг него с функцией 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, я открыт для предложений. В любом случае это решает исходный вопрос.

Answer 2

@ Ответ Николаса-кириакидса прекрасно работает, но здесь представлена ​​более красная функция, использующая интерполяцию 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"