Простой способ получить интерполяцию CssLess

Я делаю некоторую интерполяцию переменных с меньшим CSS (я думаю, что это правильный термин), однако я не могу не думать, что у меня есть больше шагов, чем мне нужно.Простой способ получить интерполяцию CssLess

Вот что я делаю:

@blue50:#e3f2fd; // concrete colorways 
@green50:#e8f5e9; 
@red50:#ffebee;

... и установить текущую тему, как это:

@primaryColor:'blue';

... и есть вспомогательный материал, который помогает мне извлечь правильный цвет:

@primary50:@@_primary50; // It feels like these 2 lines should be 1! 
@_primary50:'@{appPrimaryColor}50';

Это позволяет мне обратиться к @primary50, который, в свою очередь, возвращает гр orrect blue color (@ blue50) на основе темы, которую я установил.

Как видите, есть 2 вспомогательных шага, которые, я думаю, могут быть упрощены. Однако я не смог выработать правильный синтаксис, чтобы сделать эту работу. Это кажется тривиальной мерой, но есть более ста цветов и несколько тем, поэтому это немного длинный подход.

Первым шагом будет просто количество шагов.

Во-вторых, если возможно, я хотел бы создать цикл, который мог бы заботиться обо всех оттенках в цвете. В моем примере я использую 50 оттенок, но полный спектр состоит из 50,100,200,300,400,500,600,700,800,900, так что @ blue50, @ blue100, blue200 и т.д.

/* Пример OUTPUT */

Swatches для 'синий'

@blue50:#e3f2fd; 
@blue100:#bbdefb; 
@blue200:#90caf9; 
@blue300:#64b5f6; 
@blue400:#42a5f5; 
@blue500:#2196f3; 
@blue600:#1e88e5; 
@blue700:#1976d2; 
@blue800:#1565c0; 
@blue900:#0d47a1;

Установить тему:

@appPrimaryColor:'blue';

Используйте эти вспомогательные переменные для каждого оттенка

@primary50:@@_primary50; 
@_primary50:'@{appPrimaryColor}50';

и доступ цветов с помощью этих переменных

@primary50:@@_primary50; 
@primary100:@@_primary100; 
@primary200:@@_primary200; 
@primary300:@@_primary300; 
@primary400:@@_primary400; 
@primary500:@@_primary500; 
@primary600:@@_primary600; 
@primary700:@@_primary700; 
@primary800:@@_primary800; 
@primary900:@@_primary900;

и использовать его файл стилей

.mystyle1 { 
    color:@primary50; 
} 
.mystyle2 { 
    color:@primary100; 
}

источник

2016-02-22 John Ohara

Первая часть вопроса прост в обращении, но этот бит невозможен, потому что вы не можете динамически формировать имена переменных. * В моем примере я использую 50 оттенков, но полный диапазон состоит из 50 100 200 300 400 500 600 700 800 900, так что. .. *. Но в зависимости от того, как должен работать выходной CSS, могут быть использованы циклы. Если вы покажете свой ожидаемый вывод CSS, я могу предложить способ. – Harry

Похож на «проблему XY». Не могли бы вы предоставить более подробную информацию о том, для чего вам нужна эта переменная? –

@Harry - нелегко представить отличный пример, поскольку это просто переход на основе временных переменных, но я добавил пример того, как я могу его использовать. –

Как вы можете видеть, что есть 2 вспомогательные шаги, которые я думаю, можно было бы упростить.

Для ответа на этот конкретный вопрос, один вкладыш эквивалент:

@primary50: @@_primary50; 
@_primary50: '@{appPrimaryColor}50';

(предполагается, что значение является цвет) можно записать в виде:

@primary50: color("@{@{appPrimaryColor}50}");

Но поскольку есть слишком много причин не использовать такой код, а также считать, что весь фрагмент сам по себе больше похож на XY-проблему, стоит рассмотреть альтернативный вариант ementation для прецедента (некоторые замечания и примеры упоминаются в комментариях к вопросу, хотя это слишком много влияющих факторов и слишком много конкретных шаблонов, чтобы все было в одном ответе).

источник

2016-02-22 16:05:06

Простой способ получить интерполяцию CssLess

ответ

Смежные вопросы