CODEWITHSUNDEEP
csssass
takeradi
takeradi

Reputation: 3871

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.

Upvotes: 1

Views: 645

Answers (1)

David Chelliah
David Chelliah

Reputation: 1349

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

Upvotes: 2

Related Questions