0

我正在编写某种供个人使用的 CSS 框架，但遇到了问题。如果您是一位经验丰富的 CSS 编写者，那么我很确定您熟悉 LESS.CSS。所以...

我有自己的调色板存储在 LESS 变量中，如下所示：

    @color-red: #...;
    @color-green: #...;
    @color-blue: #...;

我将每种颜色分配给一个特定的类：

    .bg-red { background: @color-red; }
    .bg-green { background: @color-green; }
    .bg-blue { background: @color-blue; }

然后我有一个名为block：

    .block {
         display: block;
         float: left;
         padding: 10px;
         margin: 10px;
    }

这件事的目的.block:hover是改变当前block元素的背景，并增加它——比如说——#222。通常，这看起来像：

    .block:hover {
         background: @background + #222;
    }

我唯一的问题是，我们不知道@background这里是什么，因为我们创建的 div<div class="block bg-blue">中的bg-...部分可以是调色板中的任何内容。

所以我认为我需要某种相对命名来定位当前背景。你能帮我解决这个问题吗？

PS：如果你认为我没有正确解释，想象一下这是不是 PHP 并且我们在 CSS/LESS 中这样做：

    $background += 222;
4

2 回答 2

0

根据我的研究和每天在工作中使用 LESS。我不相信有一种方法可以在仅使用 LESS 处理元素后获得它的颜色。我猜您将不得不使用 Jquery 或某种脚本来执行此操作。

这是一个有很多工具来操作颜色的插件。jQuery 颜色插件 xcolor

您可能还需要另一个函数将找到的 RGB 元素颜色转换为十六进制，以便您可以添加其他颜色。Jquery 将 RGB 转换为 HEX 颜色值

希望这对您有所帮助。

于 2012-11-16T15:46:26.573 回答
0

编译 LESS 后，您无法“读取”实际颜色。但是，您可以使用颜色类而不是.block悬停，因为这是您控制颜色的依据。LESS 让这一切变得简单：

@color-red: #c00;
@color-green: #0c0;
@color-blue: #00c;

.makeHover(@color) {
   background: @color + #222;
}

.bg-red { 
    background: @color-red; 
    &:hover {.makeHover(@color-red)}
 }
.bg-green { 
    background: @color-green; 
    &:hover {.makeHover(@color-green)}
 }
.bg-blue { 
    background: @color-blue; 
    &:hover {.makeHover(@color-blue)}
 }

这产生了这个CSS：

.bg-red {
  background: #cc0000;
}
.bg-red:hover {
  background: #ee2222;
}
.bg-green {
  background: #00cc00;
}
.bg-green:hover {
  background: #22ee22;
}
.bg-blue {
  background: #0000cc;
}
.bg-blue:hover {
  background: #2222ee;
}

您还可以使用内置的颜色功能进行变暗。

如果你真的想要更通用的 css，那么用伪类做一些事情，比如这个小提琴演示。如果仅针对 CSS3 浏览器，那么您可以消除该:before小提琴中的元素并在元素上使用颜色rgba()格式。background.block

于 2012-11-17T19:31:53.467 回答