takeradi takeradi - 4 months ago 14
CSS Question

Return Hex Color code with SASS lighten function

How do I return a hex code using the SASS lighten function?

@function returnHexValue($color){
@debug $color;
@if $color == "white" {
@return "#fff";
}
@if $color == "black" {
@return "#000";
}
@return $color;
}


When I use something like
returnHexValue(lighten(#000,100%));
, I still get the value returned as
white
instead of
#fff
.

Answer

You can use following function that will force Hex value

@function force-hex($color) {
    @if type-of($color) == 'color' {
        $hex: str-slice(ie-hex-str($color), 4);
        @return unquote("\##{$hex}");
    }
    @return $color;
}

body{
  color: force-hex(lighten(#000,100%));
}

Already there are few request in SASS github project to prevent conversion of Hex to a color value. You can follow below issues

https://github.com/sass/sass/issues/343 https://github.com/sass/sass/issues/363