scss Sass功能和mixin用于设置对比背景和前景色

Posted 2021-05-18

@import "contrast_mixin";

body {
  padding: 20px;
  font: bold 16px/24px Helvetica, Arial, sans-serif;
}

div {
  padding: 10px;
  margin-bottom: 10px;
  &.a { @include contrasted(#ef4444); }
  &.b { @include contrasted(#faa31b); }
  &.c { @include contrasted(#fff000); }
  &.d { @include contrasted(#82c341); }
  &.e { @include contrasted(#009f75); }
  &.f { @include contrasted(#88c6ed); }
  &.g { @include contrasted(#394ba0); }
  &.h { @include contrasted(#d54799); }
}

module Sass::Script::Functions
  
  def get_contrast_yiq(color, dark = Sass::Script::Color.new([0,0,0]), light = Sass::Script::Color.new([255,255,255]))
    yiq = ( (color.red*299) + (color.green*587) + (color.blue*114) ) / 1000;
    yiq >= 128 ? dark : light
  end
    
end

$contrasted-default-dark:   #000;
$contrasted-default-light:  #fff;

@mixin contrasted($bg, $dark:$contrasted-default-dark, $light:$contrasted-default-light){
  background-color: $bg;
  color: get_contrast_yiq($bg, $dark, $light);
}