takeradi takeradi - 1 year ago 100
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
, I still get the value returned as
instead of

Answer Source

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;

  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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download