Question

背景/目标

我有些div。在每个div上，我想放置两个不同的类（每个类在我的应用程序中都有不同的逻辑含义）。

我想要一个类来表示一个级别，它将转换为div的颜色。我想要另一个类来表示距离，并控制任何背景应用的淡入淡出等级。

所以我希望div看起来像：

<div class="element level-beginner distance-long">

并希望将其转化为褪色的绿色背景。

我对LESS（但只是一点点）了解一点，这看起来不像嵌套样式会有所帮助（因为它不处理子元素，而是某个类是否有已经应用了。）

基本上，我想将颜色和不透明度/淡入淡出控制为彼此独立的CSS类。

问题

有没有办法减少使用，以便一个类可以控制div元素背景的alpha /淡化，而不必指定颜色？

Answer 1

LESS颜色不透明度函数（fadein，fadeout，fade）需要颜色作为其第一个参数。 LESS不知道你将如何组合你的课程，所以它不知道从哪里获取颜色。

CSS中有opacity属性，但它会调整整个元素（包括文本）的透明度。

您唯一真正的选择是为您计划使用的每个组合写出选择器，或者使用mixin为您生成它们：

.themeMatrix(@color) {
    &.styleA {
        background: fade(@color, 50%);
    }

    &.styleB {
        background: fade(@color, 20%);
    }

    &.styleC {
        border: 1px solid @color;
    }
}

.colorA {
    .themeMatrix(white);
}

.colorB {
    .themeMatrix(green);
}

Answer 2

只使用HTML，CSS和LESS，一个应用于元素的类无法“知道”另一个类的背景颜色，以淡出它。这是不可能的。

但是，您仍然可以获得类似的效果，允许您链接类以创建新效果。

写这个的基本，简单的CSS方式是这样的：

.fire {
  background: rgb(255,0,0)
}
.fire.level-beginner {
  background: rgba(255,0,0,.5)
}
.fire.level-pro {
  background: rgba(255,0,0,.25)
}

使用此CSS，如果某个元素具有类.fire 和 .level-beginner，则会获得淡出的背景。

现在，这就是预处理器很酷的原因：我们可以让mixins负责制作嵌套类，以便为所有嵌套的子选项添加一个新颜色（例如.water和blue）是一个单线事件：

<强> LESS：

.colorfade(@fade) {
  background: fadeout(@color, @fade);
}

.colorfind (@color) {
  background: @color;
  &.level-beginner {
    .colorfade(50%)
  }
  &.level-pro {
    .colorfade(25%)
  }
}

.fire {
  .colorfind(red);
}

.water {
  .colorfind(blue);
}

.earth {
  .colorfind(green);
}

<强> HTML：

<div class="fire level-beginner"></div>
<div class="water level-pro"></div>
<div class="earth level-beginner"></div>

Demo

减少预先确定的div背景的功能

背景/目标

问题

2 个答案: