Как изменить контрастные фоновые изображения с помощью SASS

Question

Я пытаюсь сделать миксин для стандартных фоновых изображений и фоновых изображений с высокой контрастностью, не знаю, как мне это сделать. может кто-то пож. тень немного света

У меня есть миксин для цвета текста и фона:

$colors:(
  standard: (
    primary-color-blue: #2aace2,
    mid-blue-color:#2695d2,
    dark-blue-color:#124b62
  ),
  contrasted: (
    primary-color-blue: #177eab,
    mid-blue-color:#1c6f9b,
    dark-blue-color:#124b62
  )
);


@function get-color($key, $type: 'standard'){
  @each $name, $color in map-get($colors, $type){
    @if($key == $name){
      @return $color
    }
  }
}

@mixin get-color($property,$color){
  #{$property}: get-color($color);
  @at-root body.contrasted & {
    #{$property}: get-color($color, contrasted);
  }
}


.className{
  @include get-color(background-color, primary-color-blue)
}

вывод:

.className {
  background-color: #2aace2;
}
body.contrasted .className {
  background-color: #177eab;
}

Спасибо !!

ИЗМЕНЕНО КАК ОТВЕТ: Отредактировано с использованием дополнительной переменной цвета / прозрачности, но выдает ошибку Отредактировано с использованием дополнительной переменной цвета / прозрачности, но содержит ошибку

$images:(
  standard: (
    pdp-more-icon-mob: white + $img_file_path + 'product-detail-page/Product-surface-display/more-icon/More-Mobile.png',
    pdp-more-icon-mob-retina :  #f00 + $img_file_path + 'product-detail-page/Product-surface-display/more-icon/More-Mobile__2x.png'
  ),
  contrasted: (
    pdp-more-icon-mob: green + $img_file_path + 'product-detail-page/Product-surface-display/more-icon/More-Desktop-High-Contrast.png',
    pdp-more-icon-mob-retina :  $green + $img_file_path + 'product-detail-page/Product-surface-display/more-icon/More-Desktop-High-Contrast__2x.png'
  )
);


@function get-images($key, $type: 'standard'){
  @each $name, $image in map-get($images, $type){
    @if($key == $name){
      @return $image
    }
  }
}

@mixin get-images($property, $color, $image, $retina:false){
  #{$property}: get-images($color + $image);
  @at-root body.contrasted & {
    #{$property}: get-images($color +  $image, contrasted);
  }
  @if($retina){
     @media (-webkit-min-device-pixel-ratio: 2){
        #{$property}: get-images($color + $image#{-retina});
        @at-root body.contrasted & {
          #{$property}: get-images($color + $image#{-retina}, contrasted);
        }
     }
  }
}


.className{
  @include get-images(background, color, image, true);
}

Answer 1

Без рефакторинга миксин можно использовать таким образом, добавив изображения на карту правильно:

$colors:(
  standard: (
    primary-color-blue: #2aace2,
    mid-blue-color:#2695d2,
    dark-blue-color:#124b62,
    image: 'img.png',
    image-retina: 'img-retina.png'
  ),
  contrasted: (
    primary-color-blue: #177eab,
    mid-blue-color:#1c6f9b,
    dark-blue-color:#124b62,
    image: 'img2.png',
    image-retina: 'img2-retina.png'
  )
);


@function get-color($key, $type: 'standard'){
  @each $name, $color in map-get($colors, $type){
    @if($key == $name){
      @return $color
    }
  }
}

@mixin get-color($property,$color){
  #{$property}: get-color($color);
  @at-root body.contrasted & {
    #{$property}: get-color($color, contrasted);
  }
}


.className{
  @include get-color(background-image, image);
  @media (-webkit-min-device-pixel-ratio: 2){
    @include get-color(background-image, image-retina)
  }
}

Но вы также можете адаптировать этот миксин для изображений и сделать так:

$images:(
  standard: (
    image: 'img.png',
    image-retina: 'img-retina.png'
  ),
  contrasted: (
    image: 'img2.png',
    image-retina: 'img2-retina.png'
  )
);


@function get-images($key, $type: 'standard'){
  @each $name, $image in map-get($images, $type){
    @if($key == $name){
      @return $image
    }
  }
}

@mixin get-images($property,$image, $retina:false){
  #{$property}: get-images($image);
  @at-root body.contrasted & {
    #{$property}: get-images($image, contrasted);
  }
  @if($retina){
     @media (-webkit-min-device-pixel-ratio: 2){
        #{$property}: get-images($image#{-retina});
        @at-root body.contrasted & {
          #{$property}: get-images($image#{-retina}, contrasted);
        }
     }
  }
}


.className{
  @include get-images(background-image, image, true);
}

Где значение true в get-images вызывает функцию image + '-retina' на карте $ images и выдает:

.className {
  background-image: "img.png";
}
body.contrasted .className {
  background-image: "img2.png";
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .className {
    background-image: "img-retina.png";
  }
  body.contrasted .className {
    background-image: "img2-retina.png";
  }
}