1

背景/目标

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

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

所以我希望 div 看起来像：

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

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

我对 LESS 了解一点（但只知道一点点），这似乎不是嵌套样式会有所帮助的情况（因为它不处理子元素，而是处理某个类是否已经被应用）。

本质上，我想将颜色和不透明度/淡化控制为相互独立的 CSS 类。

问题

  • 有没有办法利用 less 以便一个类可以控制 div 元素背景的 alpha/fade 而不必指定颜色？
4

2 回答 2

3

LESS 颜色不透明度函数（淡入、淡出、淡出）需要颜色作为其第一个参数。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);
}
于 2012-12-22T22:28:09.210 回答
3

仅使用 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，如果一个元素有 class.fire 和 .level-beginner，它会得到淡出的背景。

现在，这就是预处理器很酷的原因：我们可以让 mixins 负责创建嵌套类，因此添加一个带有所有嵌套子选项的新颜色（例如.waterwith blue）是一件简单的事情：

较少的：

.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>

演示

于 2012-12-22T22:31:48.533 回答