LESS: как назначать цвета в зависимости от контекста?

Question

[Илья Мясин]

Привет!

Есть модульная система, где части фронт-энда (блоки и контейнеры) ничего не знают друг о друге, и "подружить" их очень желательно при помощи CSS (LESS) конкретной темы, не меняя HTML-разметку.

Есть "прозрачный" блок, в котором цвет текста должен меняться в зависимости от контекста, то есть от того, куда этот блок помещен. Если контейнер имеет темный фон - текст светлый, если фон контейнера светлый - текст темный.

Разметка контейнера не содержит явного указания на его фактор "темности", это тоже хочется регулировать из стилей. В идеале должно получиться так:

.block {
    .color_main();
}
.block2 .title {
    .color_main();
}

header, footer {
    .is_dark();
}

На выходе должно дать:

block, 
.block2 .title {
    color:#000;
}

header .block, 
footer .block, 
header .block2 .title,  
footer .block2 .title {
    color:#FFF;
}

Можно ли решить эту задачу только на LESS? У меня получилось собрать все селекторы через &:extend - вот так: codepen.io/dubrowsky/pen/zvKWPq (в окошке "LESS" нажать "View compiled). Теперь их надо как-то перемножить. Руки тянутся сделать на JS "на лету" (то есть пробежаться по document.styleSheets уже в браузере), но это не по феншую. Постпроцессинг городить тоже не хочется.

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

Спасибо =)

UPD: Добавил метку "БЭМ", потому что мы его иногда используем. Интересно мнение БЭМ-адептов, как с таким быть? Потому что по канону вроде бы никакой "прозрачности" быть не может, блок не должен зависеть от контекста, а вместо этого надо явно указывать модификатор на всех блоках, то есть менять разметку. Или нет?

Comments

[nonlux]

А почему не создать класс-хелпер: например как bootstrap btn-primary bin-warning и т.д.

[Илья Мясин]

nonlux: HTML-разметка и для блоков, и для контейнеров (лейаут) берется из одной большой библиотеки. Ее можно "доопределять" в рамках темы, но для этого в шаблоне надо указать, что вот такой-то параметр может меняться. Чтобы снизить энтропию, хочется по возможности сократить количество таких параметров до необходимого минимума, делая без изменения разметки все, что можно сделать на CSS. Потому что CSS у темы есть в любом случае.

Answer 1

[Денис Инешин]

Можно например так:

.block {
    color: #fff;
    .title {
        color: #fff;
    }

    header &, footer & {
        color: #000;
        .title {
            color: #000;
        }
    }
}

Comments

[Илья Мясин]

Спасибо, это понятно. Но при таком подходе приходится для каждого "прозрачного" блока явно перечислять все "темные" контейнеры. А тех и других может быть довольно много, поэтому я и хочу избавиться от их прямого указания.

Answer 2

[nonlux]

Less:

.blocks(@col) {
  & .block {
    color: @col;
  }
}

.blocks(#fff);

.header, .footer {
  .blocks(#bbb);
}

css:

.block {
  color: #ffffff;
}
.header .block,
.footer .block {
  color: #bbbbbb;
}

Comments

[Илья Мясин]

Здесь жестко зашит класс .block, но в принципе ближе к правде. Если смириться с необходимостью жестко зашить список селекторов какого-то из двух типов, можно делать как-то так (тут явно перечислены "темные" контейнеры):

@dark_containers:~"header, footer, .dark_block";

.color() {
    color:#000;
    @{dark_containers} & {
        color:#FFF;
    }
}

.block {
    .color();
}

.block2 .name {
    .color();
}

[Илья Мясин]

dubr: а, нет, вру - он не будет "перемножать" селекторы из переменной и вместо header .block, footer .block, .dark_block .block получится только header, footer .dark_block .block =(

[Илья Мясин]

dubr: ... что, впрочем, решается переменной-списком и циклом по ней:

@dark_containers: ~"header", ~"footer", ~".dark_block", '.tiles_with_pic .tile_no_pic';

.color(@step:1) when (@step < length(@dark_containers)+1) {
    color:#000;
    @sel: extract(@dark_containers,@step);
    @{sel} & {
        color:#FFF;
    }
    .color(@step + 1);
}

.block {
    .color();
}

.block2 .name {
    .color();
}

[nonlux]

у тебя классы block , block2 .name, и т.д в разных файлах?

[Илья Мясин]

nonlux: да, свой файл у каждого блока, плюс файл лейаута, плюс файл с миксинами и глобальными переменными. Поэтому я и мечтаю о миксине, который помечает свойства "темный" / "прозрачный" и т.д. именно там, где нужно. Но в принципе все файлы можно собирать в одном пространстве имен, поэтому вариант с глобальной переменной со списком селекторов - это почти решение.