您可以通过使用内置的contrast
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
*/
}
}
}
Demo http://codepen.io/hari_shanx/pen/kzBHc | LESS 功能规格 - 对比 http://lesscss.org/functions/#color-functions-contrast
简化版:(礼貌 -最多七相 https://stackoverflow.com/users/2712740/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";
Demo 2 http://codepen.io/seven-phases-max/pen/kFpzC