Question

我正在编写某种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 class="block bg-blue">创建div，其中bg-...部分可以是调色板中的任何内容

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

P.S。：如果你认为我没有正确解释它，想象一下，如果这是PHP，我们在CSS / LESS中这样做：

    $background += 222;

Answer 1

从我的研究中，每天在工作中使用LESS。我不相信只有使用LESS处理后才能获得元素的颜色。我猜你将不得不使用Jquery或某种脚本来做到这一点。

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

您可能还需要其他功能将找到的RGB元素颜色转换为十六进制，以便您可以添加其他颜色。 Jquery convert RGB to HEX colour values

希望这会对你有所帮助。

Answer 2

编译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;
}

你也可以use a built in color function for the darkening。

如果你真的想要更通用的css，那就用伪类like this fiddle demonstrates做一些事情。如果仅定位CSS3浏览器，则可以删除该小提琴中的:before元素，并在rgba()元素的background上使用.block颜色格式。

Less.css类之间的相对链接

2 个答案: