Определение переменных с помощью LESS CSS

Скажем, у меня есть три отдельные цветовые схемы, которые используются на разных страницах сайта. Каждый цвет имеет светлый, средний и темный оттенок, а цветовая схема определяется классом в теле. Предположим, что «красный» цветовая схема по умолчанию. Как это:

Color Definitions:

@red-lt:   #121;
@red-md:   #232;
@red-dk:   #343;
@green-lt: #454;
@green-md: #565;
@green-dk: #676;
@blue-lt:  #787;
@blue-md:  #898;
@blue-dk:  #909;

Basic Default Style Example

body { background-color: @red-dk;
  #container { background-color: @red-md;
     p { color: @red-dk; }
  }
}

Different Color Scheme Style Example

body.green { background-color: @green-dk;
  #container { background-color: @green-md;
     p { color: @green-dk; }
  }
}

Я хотел бы использовать переменные, чтобы мне не приходилось переписывать все цветовые вариации для каждой схемы, чтобы я мог просто написать что-то вроде этого:

body.[color-var] { background-color: @[color-var]-dk;
  #container { background-color: @[color-var]-md;
     p { color: @[color-var]-dk; }
  }
}

& # x2026; но я не могу полностью понять, как этого добиться. Помощь & # x2026 ;?

 Rob W26 июн. 2012 г., 00:38
Я не знаю динамических переменных, но для селектора это работает:~("[email protected]{color-var}")
 igorsantos0725 окт. 2015 г., 19:26
@ Керри, кто-нибудь из ответов решил твою проблему? Пожалуйста, отметьте как принятый. Я думаю, что самым голосующим должен быть - по крайней мере, это решил мой :)
 Rob W26 июн. 2012 г., 10:27
Я убираю этот комментарий, динамические переменные, безусловно, возможно:~"@{@{var}-suffix}" (см. мой ответ ниже).
 Kerri20 сент. 2013 г., 15:12
Привет, Джон, я не так хорош в объяснении более широкой проблемы без конкретного примера. Не стесняйтесь редактировать (или, по крайней мере, добавлять ключевые слова), если у вас есть способ сделать вопрос более общим.
 Jon z11 сент. 2013 г., 00:06
У меня был тот же вопрос, но мне было трудно распознать мою собственную проблему в рамках специфики этого сценария, для других пользователей было бы полезно, если бы вопрос был сформулирован более общим образом.

Ответы на вопрос(5)

Насколько мне известно,variable variable names не поддерживаются в LESS. Однако вы можете реструктурировать свои декларации более семантическим образом:

/* declare palette */
@red-lt:   #121; 
@red-md:   #232; 
@red-dk:   #343; 
@green-lt: #454; 
@green-md: #565; 
@green-dk: #676; 
@blue-lt:  #787; 
@blue-md:  #898; 
@blue-dk:  #909; 

/* declare variables based on palette colors */
@lt: @red-lt;
@md: @red-md;
@dk: @red-dk;

/* ...and only use them for main declarations */
body { background-color: @dk;        
  #container { background-color: @md;        
     p { color: @dk; }        
  }        
}  

Это должно позволить вам безболезненно переключаться между палитрами, избегая явных ссылок на цвета.

 Kerri26 июн. 2012 г., 04:46
Извините, если я плохо объяснил. По сути, мне интересно, смогу ли я достичь этого, только выписав «главное объявление»; один раз, а затем, если класс тела «зеленый», например, css извлекает зеленые значения для всех объявлений цвета. Другими словами, используя имя класса тела, чтобы определить часть имени переменной цвета. Это может быть невозможно, но такое чувство, что Mixins или Parametric Mixins могут это сделать & # x2014; но я не могу понять, как.
 26 июн. 2012 г., 05:01
@Kerri: почему бы не иметь такие определения, как.green p, .red p и т.д. в том же файле, то? Я не верю, что вы сможете переключать цвет тела во время выполнения
 Kerri26 июн. 2012 г., 22:30
Они все в одном файле. Я действительно должен быть паршивым в объяснении этого! Позвольте мне попробовать без кода: у меня есть 3 цветовые схемы (красный, зеленый, синий). Каждая схема имеет определенные оттенки dk, md и lt. Оттенки назначаются по всей таблице стилей (div может иметь границу dk, а другой цвет фона div может быть lt). Каждая страница имеет класс тела, который определяет цвет (& lt; класс тела = "синий" & gt;). Я хочу использовать этот класс тела "синий", и везде, где цвет определяется как "светлый", "средний"; или "темный", сделайте его "светло-голубым", "средне-синий"; и т.д., без необходимости выписывать утверждения 3 раза.
 Kerri26 июн. 2012 г., 03:18
Спасибо, но я не уверен, что еще подписан & # x2014; похоже, что переменные (a) lt, (a) md и (a) dk идентичны переменным (a) red-lt, (a) red-md и (a) red-dk, только что переименованы в более короткие переменные. Я не знаю, как оттуда перейти к другим палитрам. (Извините за «(a)» вместо «at» символов »stackoverflow считает, что я пытаюсь уведомить группу пользователей)
 26 июн. 2012 г., 03:44
Насколько динамичным это должно быть? Должно быть, я неправильно прочитал вопрос, но я предположил, что для вас было бы уместно заменить ссылкиmanually, Кроме того, вы компилируете эти на стороне клиента или на стороне сервера?
Решение Вопроса

использованиеинтерполяция а такжепобег, скобки в селекторе ипараметрические миксины чтобы получить желаемый эффект:

Dynamic variables by interpolation: In a string, "@{variable}" is replaced with the value of the variable. They can also be nested: Given @{@{var}-foo} and @var: bar;, the result is "barfoo".
The resulting value is quoted. To remove these quotes, prefix ~. Dynamic selectors by Selector interpolation: [email protected]{var} turns into body.bar.

Пример:

@red-md:   #232;
@red-dk:   #343;

.setColor(@color) {
    [email protected]{color} { background-color: ~"@{@{color}-dk}";
        #container { background-color: ~"@{@{color}-md}";
         p { color: ~"@{@{color}-md}"; }
      }
    }
}
.setColor(~"red"); // Escape to prevent "red" turning "#FF0000"
//.setColor(~"blue"); etc..

Превращается в:

body.red {
  background-color: #334433;
}
body.red #container {
  background-color: #223322;
}
body.red #container p {
  color: #223322;
}

Примечание. Когда ответ был изначально написан, интерполяция селектора не существовала. Смотрите предыдущую версию решения, если вы работаете со старым компилятором LESS (до LESS 1.3.1a). Поддержка старого метода будет прекращена в LESS 1.4.0.

 13 сент. 2016 г., 04:13
& quot; Они также могут быть вложенными: учитывая @ {@ {var} -foo} и @var: bar ;, результатом будет & quot; barfoo & quot;. & quot; Разве это не «бар-фу»?
 12 февр. 2013 г., 14:15
@ moonunit7 Онлайн-редактор наleafo.net/lessphp/editor.html немного устарел. Последняя версия (все еще называемая «v0.3.8», даже если были добавлены новые функции) поддерживает синтаксис, используемый в этом ответе. Я успешно использовал этот код (pastebin.com/DhnW765E ) с последней версией LESSPHP (commit 21a012).
 31 окт. 2012 г., 08:58
+1. Большая помощь, это не ясно в документах МЕНЬШЕ
 Kerri26 июн. 2012 г., 22:32
Спасибо! Мне понадобится немного времени, чтобы обернуть голову вокруг этого, но, похоже, это то, что я ищу. Я & APOS; LL & APOS; вернуться!
 26 июн. 2012 г., 18:40
+1 хороший ответ! Я искал способ сделать это в LESS и не мог вывести его из документации (обычно я использую Sass).

Я знаю, что этот вопрос довольно старый, но для тех, кто приходит в этот пост, мой ответ, возможно, может помочь

Я не совсем уверен, что вы хотите использовать это, но одно из моих предложений основано на ответе @ScottS. В моем реальном мире мне нужно создать веб-приложение, в котором оно будет показывать несколько брендов, и у каждого бренда будет свой цвет текста, фон и т. Д., Поэтому я начал искать способ сделать это в МЕНЬШЕ, что я и сделал. мог легко сделать на SASS и результат ниже:

LESS
// Code from Seven Phase Max
// ............................................................
// .for
.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))}


// Brands
@dodge : "dodge";
@ford : "ford";
@chev : "chev";

// Colors
@dodge-color : "#fff";
@ford-color : "#000";
@chev-color : "#ff0";

// Setting variables and escaping than
@brands: ~"dodge" ~"ford" ~"chev";

// Define our variable   
.define(@var) {
  @brand-color: '@{var}-color';
}

// Starting the mixin
.color() {
    // Generating the loop to each brand
    .for(@brands); .-each(@name) {
        // After loop happens, it checks what brand is being called
        .define(@name);
         // When the brand is found, match the selector and color
        [email protected]{name} & {
            color: @@brand-color;
        }
    }
}

.carColor {
    .color();
}

Результат будет:

CSS
.brand-dodge .carColor {
    color: "#fff";
}
.brand-ford .carColor {
    color: "#000";
}
.brand-chev .carColor {
    color: "#ff0";
}

Это очень сложно, и мне пришлось использовать несколько элементов, чтобы получить то, что мне нужно, сначала использовал набор миксинов, предоставленных Seven Phase Max, и вы можете найти егоВот и тогда ответ @ScottS был частью, которой не хватало в моей загадке ... надеюсь, это поможет вам и другим людям, которым необходимо создать набор переменных, стать частью другой переменной и создать менее динамичный файл.

Вы можете скопировать весь мой код и проверить наhttp://lesstester.com/

Если эти значения действительно следуют такому предсказуемому формату, это кажется идеальным случаем дляпараметрический миксин:

Меньше:

@red:   #232;
@green: #565;
@blue:  #898;


.theme (@color) {
  background-color: @color - #111;
  #container {
    background-color: @color;
    p { color: @color + #111; }
  }
}

body.red {
  .theme(@red);
}

Скомпилированный CSS:

body.red{background-color:#112211;}
body.red #container{background-color:#223322;}
body.red #container p{color:#334433;}
 Kerri26 июн. 2012 г., 03:13
Спасибо & # x2014; Думаю, мне следовало бы немного больше перепутать значения в моем примере & # x2014; они фактически абсолютно случайны с точки зрения возможности их вычисления по математике. Единственное, что не случайно, это их имена: /
 09 мая 2017 г., 11:03
Это было полезно.
 26 июн. 2012 г., 10:31
@ Керри использоватьlighten(@color, <x>%); а такжеdarken(@color, <y>%); вместо.
 Kerri26 июн. 2012 г., 22:31
Цвета - это очень специфические цветовые формулы из фирменной палитры, которые не следуют математическому шаблону.

Попробуй это

@red-lt:   #121;
@red-md:   #232;
@red-dk:   #343;
@green-lt: #454;
@green-md: #565;
@green-dk: #676;
@blue-lt:  #787;
@blue-md:  #898;
@blue-dk:  #909;

@color: 'red-lt';

div{
background: @@color;
border: 1px solid lighten(@@color,20%);
}

Ваш ответ на вопрос