用于在HTML中着色的sass类

-2

我想创建sass类，如.blue和.bg，，但根据我使用的类型，它应该为字体和/或背景着色。用于在HTML中着色的sass类

// Classes for colorizing elements 

.blue { 
    color: $primary-color; 
    &.bg { 
    background-color: $primary-color; 
    color: initial; 
    } 
} 

.light-gray { 
    color: $light-gray; 
    &.bg { 
    background-color: $light-gray; 
    color: initial; 
    } 
} 

.medium-gray { 
    color: $medium-gray; 
    &.bg { 
    background-color: $medium-gray; 
    color: initial; 
    } 
} 

.dark-gray { 
    color: $dark-gray; 
    &.bg { 
    background-color: $dark-gray; 
    color: initial; 
    } 
} 

.black { 
    color: $black; 
    &.bg { 
    background-color: $black; 
    color: initial; 
    } 
} 

.white { 
    color: $white; 
    &.bg { 
    background-color: $white; 
    color: initial; 
    } 
}

使用color:inherit这里是重复和低效的。

例如，如果我使用.black .bg只比背景颜色应该是黑色。

如果我只使用.black，那么只能使用字体颜色。

单独.bg没有在这种情况下

，可以使用哪些SCSS/SASS元素，实现小而高效的代码工作？谢谢！

来源

2016-01-20 hugo tyrakowski

你尝试过什么？什么都可以？ – cimmanon

是吗？或者你的意思是第一个答案？ –

在问这个问题之前，你还没有表明你已经尝试过任何东西，它只是一个“为我写代码”的请求。我们不这样做。付出一些努力来解决你的问题。你有没有考虑到输出应该是什么？ – cimmanon

我想我明白你的问题，如果我在这里做的是我会怎么做：

$blue: blue; 
$light-grey: white-smoke; 
$medium-grey: grey; 

$colorList: blue, light-grey, medium-grey; 
$colorListVar: $blue, $light-grey, $medium-grey; 


@for $i from 1 through length($colorList) { 
    .#{nth($colorList, $i)} { 
     color: nth($colorListVar, $i); 
     &.bg { 
      color: initial; 
      background: nth($colorListVar, $i); 
     } 
    } 
}

来源

2016-01-20 15:24:50

以上的帖子更多的代码，这正是我期待的内容，非常感谢！ –

没问题，随时投票！ –

-1

写一个混合。它应该是这样的：

@mixin color($color, $bg) { 
    @if $bg == "true" { 
    color: $color; 
} @else if $bg == "false" { 
    color: initial; 
    background-color: $color; 
} 
} 

.blue{ 
    @include color(blue, true); 
    &.bg { 
    @include color(blue, false); 
    } 
}

来源

2016-01-20 13:43:47 Nirri

我认为这个问题更关系到如何构建类和名称来获得所需的效果，然后如何编写一个混合... – somethinghere

看起来很有前途，但我最终会写出比我在 –

用于在HTML中着色的sass类

回答

相关问题