How to Turn Off SASS Rgb -> Color Name

Can I turn off SASS RGB - Color Name

By default, Sass will not convert literal color values from their hex values unless you are forcing Sass to interpolate with #{} or a variable.

Using interpolation will return the "to_sass" version of the value you're interested in. For example, #{ #fff } will interpolate to "white". This also happens during variable replacements: color literals are translated to Color objects when used as variables, then "to_sass"ed into your stylesheet.

Furthermore, you may specify the style option compressed, which will return the less byte-length version (i.e. red instead of #f00). Since white is 5 characters long and #fff is only 4, your rule will replace with #fff instead.

There is no way to turn off the reverse HTML4 color name conversion when using variables. As a work-around, you can declare color variables as a string, then use then in styles with the unquote() function.

$color: '#fff';
.white { color: unquote($color) }

Sass/Compass - Convert Hex, RGB, or Named Color to RGBA

Use the rgba function built into Sass

Sets the opacity of a color.

Examples:

rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5)

rgba(blue, 0.2) => rgba(0, 0, 255, 0.2)

Parameters:

(Color) color

(Number) alpha — A number between 0 and 1

Returns:

(Color)

Code:

rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);

Why does Sass change the format of my colors?

How Sass treats colors varies depending on what version you're using. But there are a few common behaviors:

Sass will always maximize backwards compatibility whenever possible. Since keyword, hex, and rgba have the broadest browser support, all colors will be converted to one of those 3 formats, prioritizing towards either the keyword or hex. The rgba format will only be used if the color has alpha transparency (if you specify rgba(0, 0, 0, 100), Sass will convert it to either black or #000)
If Sass has to choose between using the keyword or hex formats, the one it will use will depend on the output settings. The compact or compressed modes will always convert to hex, the other formats will use the keyword.
Sass will convert hex colors to their 3-digit format in compressed mode (eg. #000000 will be output as #000).

Sass 3.3 and older

Sass only converts colors when they are used as variables or if they are not in one of the 3 formats as described above:

$color-hex: #000000;
$color-keyword: black;
$color-rgb: rgb(0, 0, 0);
$color-hsl: hsl(0, 0, 0);

.box-hex {
    color: $color-hex;
    background: #000000;
}

.box-keyword {
    color: $color-keyword;
    background: black;
}

.box-rgb {
    color: $color-rgb;
    background: rgb(0, 0, 0);
}

.box-hsl {
    color: $color-hsl;
    background: hsl(0, 0, 0);
}

Output:

.box-hex {
  color: black;
  background: #000000;
}

.box-keyword {
  color: black;
  background: black;
}

.box-rgb {
  color: black;
  background: black;
}

.box-hsl {
  color: black;
  background: black;
}

Sass 3.4 and later

The only change from 3.3 to 3.4 is that when using variables, Sass will preserve the format of your color... unless it is in something other than the keyword, hex, or rgba formats.

.box-hex {
  color: #000000;
  background: #000000;
}

But what if I really need a specific format?

If you absolutely must have a specific format, you can turn it into a string:

$color: #{'#F00'}; // or `unquote('#F00')`
.foo {
    color: $color;
}

Output:

.foo {
  color: #F00;
}

Just keep in mind that when you do this, your "color" will not work with color manipulation functions like lighten() or darken().

Sass - Converting Hex to RGBa for background opacity

The rgba() function can accept a single hex color as well decimal RGB values. For example, this would work just fine:

@mixin background-opacity($color, $opacity: 0.3) {
    background: $color; /* The Fallback */
    background: rgba($color, $opacity);
}

element {
     @include background-opacity(#333, 0.5);
}

If you ever need to break the hex color into RGB components, though, you can use the red(), green(), and blue() functions to do so:

$red: red($color);
$green: green($color);
$blue: blue($color);

background: rgb($red, $green, $blue); /* same as using "background: $color" */

My RGB variables are not working on SCSS/SASS

The problem might be related to the VSC Live Sass Compiler.

Don't use this extension: Live Sass Compiler by Ritwick Dey

You are probably using this extension: Live Sass Compiler by Ritwick Dey. It's widely used, but is no longer supported by the author. Consequently, the SASS version isn't updated. This extension might produce the error you are describing.

Use this extension: Live Sass Compiler by Glenn Marks

You should use this extension: Live Sass Compiler by Glenn Marks. As the author states: A big thank you to @ritwickdey for all his work. However, as they are no longer maintaining the original work, I have released my own which has been built upon it.

Let me know if this is helpful.

SASS Simple function to convert HEX color into RGB as a string without alpha

You can write the function like this:

@use "sass:color";
@function hex2rgb($hex) {
  @return red($hex), green($hex), blue($hex);
}

But the problem is sass could not parse the variables for html custom properties.
So this line --color-body-bg-light: $color-bg-light; won't work.

At the end, you will get this:

:root {
  --color-body-bg-light: $color-bg-light;
  --color-body-bg-light-rgb: $color-bg-light-rgb;
}