Условный CSS на основе переменной цвета фона внутри цикла

Я понимаю, что это вопрос, аналогичный этому Условный CSS на основе переменной цвета фона

но мне нужно сделать это внутри цикла в LESS. Если цвет фона слишком темный, я хочу создать другой класс, чтобы я мог сделать текст вверху светлее, но не уверен, как, поскольку я не думаю, что вы можете использовать функции осветления и затемнения с шестнадцатеричными цветами ...?

Вот мой МЕНЬШЕ 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
person Xav    schedule 23.07.2014    source источник
comment
это то, что вам нужно? Вам просто нужно использовать функцию contrast внутри цикла.   -  person Harry    schedule 23.07.2014
comment
И на всякий случай в вашем сниппете слишком много ненужного кода. Вот упрощенный кодовый код (разветвленный из кода, любезно предоставленного Гарри < / b>).   -  person seven-phases-max    schedule 23.07.2014
comment
Хорошая вещь. Спасибо, парни. Не знаю, как сделать это ответом, но, если можете, продолжайте!   -  person Xav    schedule 23.07.2014
comment
@ seven-phase-max: Хочешь ответить, товарищ? Я думаю, вы приложили больше усилий, упростив его, чем я, добавив эту строку :) Xav - Приятно знать, что это помогло.   -  person Harry    schedule 23.07.2014
comment
@ Гарри, нет (я убегаю прямо сейчас) - пожалуйста, не стесняйтесь отвечать.   -  person seven-phases-max    schedule 23.07.2014

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете добиться этого, используя встроенную функцию 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
           */
    }
  }
}

Демо | Характеристики функции МЕНЬШЕ - контрастность

Упрощенная версия: (любезно предоставлено - seven-phase-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";

Демонстрация 2

person Harry    schedule 23.07.2014