基于循环内背景颜色变量的条件CSS [英] Conditional CSS based on background color variable inside loop
本文介绍了基于循环内背景颜色变量的条件CSS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我意识到这是与此基于背景颜色的常规CSS类似的问题变量
但是我需要在LESS的循环内完成它.如果背景颜色太暗,我想生成另一个类,以便可以使顶部的文本变亮,但不确定如何,因为我不认为您可以使用带有十六进制颜色的变亮和变暗功能...?
but I need to do it inside a loop in LESS. If a background colour is too dark I want to generate another class so I can make the text on top lighter but not sure how as I don't think you can use lighten and darken functions with hex colours...?
这是我的更少 http://codepen.io/anon/pen/IlsJE ?editors = 110
.for(@i, @n) {.-each(@i)}
.for(@n) when (isnumber(@n)) {.for(1, @n)}
.for(@i, @n) when not (@i = @n) {
.for((@i + (@n - @i) / abs(@n - @i)), @n);}
// .for-each
.for(@array) when (default()) {.for-impl_(length(@array))}
.for-impl_(@i) when (@i > 1) {.for-impl_((@i - 1))}
.for-impl_(@i) {.-each(extract(@array, @i))}
// PAs
@pa1: "pa1";
@pa2: "pa2";
@pa3: "pa3";
@pa4: "pa4";
// Colors
@pa1-color: #72afb6;
@pa2-color: #9fad9f;
@pa3-color: #8dd8f8;
@pa4-color: #00567A;
// Setting variables and escaping them
@pas: ~"pa1" ~"pa2" ~"pa3" ~"pa4";
// Define our variable
.define(@var) {
@pa-color-primary: '@{var}-color';
}
// Starting the PA mixin
.pacolors() {
// Generating the loop for each PA
.for(@pas); .-each(@name) {
// After loop happens, it checks what brand is being called
.define(@name);
.@{name} .bg-accent {
background-color: @@pa-color-primary;
}
}
}
.pacolors();
任何帮助将不胜感激.
推荐答案
您可以使用LESS提供的内置contrast
函数来实现此目的.
You can achieve this by using the built-in contrast
function provided by LESS.
// Starting the PA mixin
.pacolors() {
// Generating the loop for each PA
.for(@pas); .-each(@name) {
// After loop happens, it checks what brand is being called
.define(@name);
.@{name} .bg-accent {
background-color: @@pa-color-primary;
color: contrast(@@pa-color-primary,
lighten(@@pa-color-primary, 100%),
darken(@@pa-color-primary, 100%),10%);
/* syntax - contrast(color-for-comparison,
color1 - lighten (100%) is essentially white,
color 2 - darken (100%) is essentially black,
threshold percentage based on which decision is taken
*/
}
}
}
演示 | 其他功能规格-对比度
简化版本:(由礼貌- seven-phases-max )
// Colors
@pas:
pa1 #72afb6,
pa2 #9fad9f,
pa3 #8dd8f8,
pa4 #00567A;
// Styles
& {
.for(@pas); .-each(@pa) {
@name: extract(@pa, 1);
@color: extract(@pa, 2);
.@{name} .bg-accent {
background-color: @color;
color: contrast(@color, white, black, 10%);
}
}
}
p {padding: 10px}
// ........................................................
@import "https://raw.githubusercontent.com/seven-phases-max/less.curious/master/src/for";
这篇关于基于循环内背景颜色变量的条件CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文