MDL RGB string to RGB numbers

mdl-rgb-string-to-numbers.md

MDL defines many RGB values as a string, so $my-color: rgba($input-text-error-color, 0.9); will result in an error: "Argument '$color' of 'rgba($color, $amount)' must be a color"

What we could do instead:

• Strip "rgb" or "rgba", "(", ")" and spaces from MDL SASS variable, e.g.
  $input-text-error-color: unquote("rgb ( 213, 0,0)") => "213,0,0"
  
• Split the comma separated string into a number list
  "213,0,0" => [213, 0, 0]
  
• Then feed the numbers into the wanted SASS function, e.g:
  $my-list: [213, 0, 0];
  $my-rgb: rgb(nth($my-list, 1),nth($my-list, 2), nth($my-list, 3);
  => #d50000
  $my-color: darken($my-rgb), 10%);
  => #a20000

Live code @SASSMeister

///
/// Convert `$rgb-string` to a number list
/// @author Leif Olsen
/// @param {String | Number} $value - Value to be parsed
/// @return {list} the rgb number list
@function rgb-string-to-numbers($value) {
  @if type-of($value) == 'number' or type-of($value) == 'color' {
    @return $value;
  } @else if type-of($value) != 'string' {
    $_: log('Value for `rgb-string-to-numbers` should be a number or a string.');
  }
  
  $s: str-replace($value, "rgba");
  $s: str-replace($s, "rgb");
  $s: str-replace($s, "(");
  $s: str-replace($s, ")");
  $s: str-replace($s, " ");
  $l: explode($s);
  $result: ();
  @for $i from 1 through length($l) {
    $result: append($result, to-number(nth($l, $i)));
  }
  @return $result;
}

///
/// Convert `$rgb-string` to a corresponding hex value
/// @author Leif Olsen
/// @param {String | Number} $value - Value to be parsed
/// @return {number} the rgb hex value
@function rgb-string-to-hex($value) {
  @if type-of($value) == 'number' or type-of($value) == 'color' {
    @return $value;
  } @else if type-of($value) != 'string' {
    $_: log('Value for `rgb-string-to-numbers` should be a number or a string.');
  }
  $l: rgb-string-to-numbers($value);
  @return rgb(nth($l, 1), nth($l, 2), nth($l, 3));
}

Usage

//
// Usage
$rgb-as-string: " rgb ( 213, 0,0)";  // == $input-text-error-color
$real-rgb: rgb-string-to-hex($rgb-as-string);
$darkened: darken($real-rgb, 10%);
$real-hex: rgb(213, 10, 128);
$hex-hex: rgb-string-to-hex($real-hex);

.my-element {
  content: $rgb-as-string;
  color: $real-rgb;
  background-color: rgba($real-rgb, 0.9);
  border-color: $darkened;
  outline-color: $hex-hex;
}

// Output:
// .my-element {
//   content: " rgb ( 213, 0,0)";
//   color: #d50000;
//   background-color: rgba(213, 0, 0, 0.9);
//   border-color: #a20000;
//   outline-color: #d50a80;
// }

Helper functions

///
/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel, http://hugogiraudel.com/2014/01/13/sass-string-replacement-function/
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

///
/// @function explode() -- split a string into a list of strings
/// @author https://gist.github.com/danielpchen/3677421ea15dcf2579ff
///  {string} $string: the string to be split
///  {string} $delimiter: the boundary string
///  @return {list} the result list
@function explode($string, $delimiter: ',') {
  $result: ();
  @if $delimiter == "" {
    @for $i from 1 through str-length($string) {
      $result: append($result, str-slice($string, $i, $i));
    }
    @return $result;
  }
  $exploding: true;
  @while $exploding {
    $d-index: str-index($string, $delimiter);
    @if $d-index {
      @if $d-index > 1 {
        $result: append($result, str-slice($string, 1, $d-index - 1));
        $string: str-slice($string, $d-index + str-length($delimiter));
      } @else if $d-index == 1 {
        $string: str-slice($string, 1, $d-index + str-length($delimiter));
      } @else {
        $result: append($result, $string);
        $exploding: false;
      }
    } @else {
      $result: append($result, $string);
      $exploding: false;
    }
  }
  @return $result;
}

///
/// Add `$unit` to `$value`
///
/// @param {Number} $value - Value to add unit to
/// @param {String} $unit - String representation of the unit
///
/// @return {Number} - `$value` expressed in `$unit`
///
@function to-length($value, $unit) {
  $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);
  
  @if not index(map-keys($units), $unit) {
    $_: log('Invalid unit `#{$unit}`.');
  }
  
  @return $value * map-get($units, $unit);
}

///
/// Casts a string into a number
///
/// @param {String | Number} $value - Value to be parsed
///
/// @return {Number}
///
@function to-number($value) {
  @if type-of($value) == 'number' {
    @return $value;
  } @else if type-of($value) != 'string' {
    $_: log('Value for `to-number` should be a number or a string.');
  }

  $result: 0;
  $digits: 0;
  $minus: str-slice($value, 1, 1) == '-';
  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);

  @for $i from if($minus, 2, 1) through str-length($value) {
    $character: str-slice($value, $i, $i);

    @if not (index(map-keys($numbers), $character) or $character == '.') {
      @return to-length(if($minus, -$result, $result), str-slice($value, $i))
    }

    @if $character == '.' {
      $digits: 1;
    } @else if $digits == 0 {
      $result: $result * 10 + map-get($numbers, $character);
    } @else {
      $digits: $digits * 10;
      $result: $result + map-get($numbers, $character) / $digits;
    }
  }

  @return if($minus, -$result, $result);
}