0

I'd like to check in SASS if a color is white, black, or a nuance of grey.

Exemple :

If color is red => apply my css If color is "#000" or "#686868" => don't apply my css

Is there any solution using SASS or native CSS ?

tonymx227
  • 4,521
  • 15
  • 42
  • 76
  • This will help: https://sass-lang.com/documentation/at-rules/control/if – Manas Khandelwal Mar 26 '21 at 11:14
  • 1
    Does this answer your question? [Syntax for if/else condition in SCSS mixin](https://stackoverflow.com/questions/5456467/syntax-for-if-else-condition-in-scss-mixin) – Manas Khandelwal Mar 26 '21 at 11:15
  • I am not quite sure how to understand your question. Could you clarify it. Do you mean how to work in sass with `@if`? Do you mean how to check if a dynamic set color in browser is red/gray? Or do you mean how to compare colors in if-directive (i.e. something `$color == '#000`? A code example would help in every case. – Brebber Mar 26 '21 at 11:31
  • @ManasKhandelwal yes, but i need something more, i don't want to use `@if` for all grey colors... there is a lot of hex codes for grey colors... Is there any solutions to test with a sass function or something more is a hex code is a grey color ? – tonymx227 Mar 26 '21 at 13:13

1 Answers1

0

Thanks for clarification your question in comment.

Indeed there is an easy possibility in SASS to check if color is a gray color

Use: @if $color == grayscale($color) { ... }
See documentation: https://sass-lang.com/documentation/modules/color#grayscale

If you want to wrap that in a function do:


@function is_gray($color){
    
    $result: false;
    @if $color == grayscale($color){
        $result: true;
    }
    @return $result;
}


// than call ...
@if is_gray($test){
   ...
}
Brebber
  • 2,221
  • 2
  • 6
  • 15