Search code examples
stringsassrgbtostring

How to change the RGB value of a variable in to string in SASS?

I have been trying to change the value of a variable to string, I have read and tried some built-in SASS functions. As an example look at the code below:

$primary-color: rgb(0, 0, 0);
$string: quote($primary-color); // => "#000000"

// But I want to have it as "rgb(0, 0, 0)".

Thanks

Solution

  • $primary-color variable is known as a color type by SASS and won't save its format. The goal is reachable by using interpolation (#{}) and the sass:color module. More information about them is available at the following links:

    https://sass-lang.com/documentation/interpolation

    https://sass-lang.com/documentation/modules/color#red

    In the following code, statement between #{ and } is a SASS code and will be processed by SASS. red() is a function that gets the red part number of a color; also green() and blue() are the same as red() function for their colors.

    $string: "rgb(#{red($primary-color)},#{green($primary-color)},#{blue($primary-color)})"; // => "rgb(0, 0, 0)"