Set default colors only if they are null (SASS)

[ivanvermeyen]

Hi

I was trying to set some colors for the controls, but it seems you are overwriting the vars $plyr-control-color and $plyr-control-color-hover, based on the lightness of $plyr-controls-bg and $plyr-control-bg-hover.

https://github.com/Selz/plyr/blob/master/src/sass/plyr.scss#L26-L45

I could change the 'gray' vars, but $gray: red; doesn't feel that good :)

Maybe you could add a check to see if $plyr-control-color and $plyr-control-color-hover are null before overwriting them?

Still loving this plugin! 👍

[sampotts]

I think using !default would solve this?
https://robots.thoughtbot.com/sass-default

Sorry, I've always been a LESS person and have been meaning to move over to SASS but just haven't found the time. I'll check it out and get back to you.

Cheers 👍

[ivanvermeyen]

Thanks.

EDIT:

Sorry, this seems to be a better, cleaner solution:

// Contrast
@if lightness($plyr-controls-bg) >= 65% {
    $plyr-control-color: $plyr-gray-light !default;
}
@else {
    $plyr-control-color: $plyr-gray-lighter !default;
}
@if lightness($plyr-control-bg-hover) >= 65% {
    $plyr-control-color-hover: $plyr-gray !default;
}
@else {
    $plyr-control-color-hover: #fff !default;
}

And then probably remove these 2 lines :)

https://github.com/Selz/plyr/blob/master/src/sass/plyr.scss#L30-L31

$plyr-control-color:             null !default;
$plyr-control-color-hover:       null !default;