[Global functions] add hex functions to convert RGB / RGBA to #RRGGBB / #RRGGBBAA

[axdyng]

Currently, Sass has HSL and RGB helper functions. However, it is not possible to convert vice versa? (Or is it, but not documented?)

I think it would be really helpful to developers for this to come out of the box. It's a pain to switch from a #hex notation to rgba() notation just for adding opacity to a color.

[stof]

The sass rgb/rgba functions supports a signature with 2 arguments: rgb($color, $alpha) which already solves this need IMO (as you can use your existing hex color for the first argument): https://sass-lang.com/documentation/modules#rgb

[axdyng]

What I meant is to convert rgb to hexadecimal format

For example:

• hex(rgb(255, 255, 255)) compiles to #FFFFFF / white
• hex(rgba(0, 0, 0, 0.5) compiles to #000000CC (#RRGGBBAA format)

[stof]

The rendering of sass values in the output is not configurable. the implementation deals with it on its own (as they are equivalent in CSS anyway):

• Sass never uses the #RRGGBBAA format (as it has lower browser support).
• In compressed style, Sass automatically chooses the shorter format for opaque colors in the output (considering the #RGB format, the #RRGGBB format and named colors)
• if the color has an original form (i.e. it was parsed from the scss source rather than being the result of some computation), it is rendered this way
• in expanded style, Sass will use named color if possible or the #RRGGBB format for opaque colors
• Semi-transparent colors are rendered as rgba(...)

Note that this corresponds to the rendering behavior of dart-sass. libsass might have some differences.

[stof]

Btw, to implement a hex function which could force the behavior you describe, it would have to be a function which takes a color as argument and return an unquoted string (if it returns a sass color, it cannot control its formatting and would be a no-op). Such function would be confusing in the Sass language IMO.

[nex3]

I'll cosign @stof's answer. If you want your CSS output to use specific color formats, I recommend using a post-processor like PostCSS to convert all colors to that format after Sass has run.