porównywanie kolorów w sass

Question

Witam,
mam takie kod w sass:

@mixin div-tree($color: black) {

    background-color: $color;
    padding: 5px;
    display: block;

    @if $color > #777777 {
        
        color: darken($color, 50%);
        border: 5px solid darken($color, 30%);
    } @else {
        color: lighten($color, 50%);
        border: 5px solid lighten($color, 30%);
    }
}

.div-tree {

    > p {
        @include div-tree();
    }

    span {
        @include div-tree(blue);

         p {
            @include div-tree(white);
        }
    }
}

Po skompilowaniu pokazuje mi:  "undefined operation: black gt #777777" i nie wiem co zrobić, żeby obliczało mi czy podany kolor w argumencie jest mniejszy lub większy od wskazanego.

Z góry dzięki za pomoc

PS. gdy daje "==", "!=" to działa

Answer 1

@mixin div-tree($color: black) {
    background-color: $color;
    padding: 5px;
    display: block;
 
    @if lightness($color)  > lightness(#777) {         
        color: darken($color, 50%);
        border: 5px solid darken($color, 30%);
    } @else {
        color: lighten($color, 50%);
        border: 5px solid lighten($color, 30%);
    }
}
 
.div-tree {
 
    > p {
        @include div-tree();
    }
 
    span {
        @include div-tree(blue);
 
         p {
            @include div-tree(white);
        }
    }
}