Question

我正在尝试为标准背景图像和高对比度背景图像制作混音，不知道我该怎么做。有人可以。遮挡一些光线

我有一个用于文本颜色和背景颜色的mixin：

$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

无需重构mixin 就可以通过这种方式使用它 - 在地图中正确添加图片：

$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);
}

'get-images'中的true在$ images地图中调用image +'-retina'，并输出：

.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";
  }
}

如何使用SASS更改高对比度背景图像

1 个答案: