文章/答案/技术大牛

发布

社区首页 >问答首页 >更改scss中的可变颜色

问更改scss中的可变颜色
EN

Stack Overflow用户

提问于 2018-04-13 04:53:39

回答 1查看 3.6K关注 0票数 2

我试图改变颜色的改变对比(添加更改对比类到身体)在scss中。

我的静态颜色是：

$原色-蓝色：#2 aace2；

$中蓝色：#2695d2；

$深蓝色：#124b62；

关于change对比度：

$原色-蓝色：#177 blue；

中蓝色：#1c6f9b；

$深蓝色：#124b62；

应该像在sass那样

if(change-contrast) {
//  console.log (get High Constrast Colors)
}
else {
//  console.log (Static Colors)
}

我试着像下面这样做，但如果我喜欢下面，我必须增加每一节课。

@mixin branding {
  @each $brand in $brand_clr {
    &.#{nth($brand,1)} {
      $primary-color-blue: #177eab;
      @content;
    }
  }
}

test {
    background: $primary-color-blue;
    @include branding {
      background: $primary-color-blue;
    }
}

感谢你在这方面的帮助！

谢谢

scss-mixins

css

if-statement

sass

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-04-13 14:16:06

我认为解决方案遇到了一个结构良好的彩色地图。你需要按类型对颜色进行分组。静态的，对比的)。然后，使用一个混合，以避免重复你自己。

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

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49809524

复制

相似问题

问更改scss中的可变颜色
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改scss中的可变颜色EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改scss中的可变颜色
EN