sassmaterial-designmaterial-design-lite

SASS HEX to RGB without 'rgb' prefix

The Question:

Is there a SASS function/technique that transforms a HEX value to a simple RGB string.

Simple here meaning just a string without it being enclosed in rgb() ?

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

Why I need this:

I'm using Material Design Lite as my UI 'framework'. More specifically I'm using the SASS version so I can tweak the color variables according to my app's style-guide.

For some reason the color variables in _variables.scss of MDL take this format for color definitions:

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

which is really, really odd. I expected, at most, something along the lines of 

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

My color variables are stored in another file called _globals.scss in which I store my variables in regular HEX format so I can easily reuse them in other places:

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

I don't want to define 2 times my colours (1 HEX & 1 MDL-compatible RGB string), hence the reason I need to transform HEX to RGB-string.

Solution

  • I've hacked around it with a SASS function:

    @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);

}

    Usage:

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

    I think the MDL team intended to have a different way to customise the palette and I'm missing it, so if someone knows a better way to customise MDL's palette I'm open to suggestions. Either way this solves the original question.