Less 基于循环内背景颜色变量的条件CSS

我意识到这是一个类似的问题

但我需要在一个循环中用更少的时间完成。如果背景颜色太暗，我想生成另一个类，这样我可以使顶部的文本更亮，但不确定如何使用，因为我不认为您可以使用十六进制颜色的变亮和变暗功能

这是我的行李

---

任何帮助都将不胜感激。

您可以使用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
           */
    }
  }
}

|

简化版：（提供-）

---

您需要什么？你只需要在循环中使用

contrast

函数，以防万一，代码片段中有太多不必要的代码。这是简化的（从哈利善意提供的那一个分叉）。好东西。谢谢各位。不知道该如何回答这个问题，但如果可以，请继续@最多七个阶段：你想继续回答吗，伙计？我想你在这一点上花了更多的精力，简化了它，比我加上那一行：）Xav-很高兴知道它有帮助。@Harry，没有（我现在就要逃跑了）-请随意回答。

// 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
           */
    }
  }
}

// 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";