Less.css类之间的相对链接

我在写一些CSS框架供个人使用，并且遇到了问题。如果你是一位经验丰富的CSS作家，那么我非常肯定你对LESS.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-...部分可能是从调色板什么。

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

PS：如果你认为我没有正确地解释它，试想如果这是PHP，我们在CSS中这样做/ LESS：

$background += 222;

来源

2012-11-16 edgeofmystery

一旦编译了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元素，并在.block元素的background上使用rgba()颜色格式。

来源

2012-11-17 19:31:53 ScottS

这实际上是有帮助的。谢谢！ – edgeofmystery

从我的研究和使用较少的日常工作在这里。我不相信有一种方法可以在元素被LESS处理后获得一种颜色。我猜你将不得不使用Jquery或某种脚本来做到这一点。

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

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

希望这可以帮助你。

来源

2012-11-16 15:46:26 Andrew

哦...谢谢，但现在它只是让我更加烦恼。我的意思是，我不认为这是一种罕见的情况。我认为必须有一个解决方案。感谢您的评论，但不幸的是，jQuery和JavaScript对我来说都是胡言乱语，我之前从未使用过它们中的任何一个。 – edgeofmystery

我希望你找到你所需要的。如果确实发生了，请将其发回，所以我们使用它:) – Andrew

Less.css类之间的相对链接

回答

相关问题