Можно ли манипулировать переменными css с помощью LESS?

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

Экспериментируя с нативными переменными CSS, я заметил, что могу комбинировать их с помощью переменных препроцессора, поэтому в следующем примере: (используйте firefox)

h1 {
  --length: 40px;
  @length: var(--length);
  line-height: @length;
  border: 5px solid tomato;
}

высота строки была правильно отображена на 40px

Но когда я попытался манипулировать переменной препроцессора - вот так< /а>:

h1 {
  --length: 40px;
  @length: var(--length);
  @length2: @length*2;
  line-height: @length;
  padding: @length2;
  border: 5px solid tomato;
}

... код не сработал.

Это возможно как-то?


less css-variables
person Danield    schedule 01.03.2016    source источник
comment
Если я не ошибаюсь, var(--length) преобразуется в свое значение с помощью UA, что происходит после того, как компилятор Less компилирует код в CSS. Во время компиляции значение @length равно только var(--length), которое не является числом и, следовательно, приводит к ошибке компиляции. Попробуйте сделать это как @length2: @length ~"* 2"; и посмотрите, получится ли. Я не могу проверить, потому что мой браузер старый. Или даже @length2: ~"calc(@{length} * 2)";.   -  person Harry    schedule 01.03.2016
comment
@Harry - в результате отступ получает значение: var(--length) * 2;   -  person Danield    schedule 01.03.2016
comment
С calc() обернутым вокруг? Хотя это всего лишь догадки. Можете ли вы применять математические операции к переменным CSS без использования препроцессора?   -  person Harry    schedule 01.03.2016
comment
@ Гарри - Да, это работает! Пожалуйста, добавьте это как ответ, чтобы я принял   -  person Danield    schedule 01.03.2016

Ответы (1)


arrow_upward
3
arrow_downward

Как упоминалось в моем комментарии, мое понимание переменных CSS заключается в том, что переменная преобразуется в ее фактическое значение с помощью UA. Это происходит после того, как компилятор Less скомпилирует файл, и поэтому он не будет знать, какое фактическое значение содержит переменная CSS.

Для компилятора значение @length равно только var(--length). Поскольку это не число, во время компиляции возникает ошибка, указывающая, что математическая операция выполняется с недопустимым типом.

OperationError: Операция с недопустимым типом в строке 4, столбце 3:

Один из способов исправить это — заставить компилятор Less выводить имя переменной как есть и добавлять к нему множитель (например, конкатенация строк). Тогда управление останется за UA.

Но поскольку все математические операции CSS должны выполняться внутри функции calc(), все это должно быть обернуто внутри нее. Таким образом, приведенный ниже код будет работать нормально.

h1 {
  --length: 40px;
  @length: var(--length);
  @length2: ~"calc(@{length} * 2)";
  line-height: @length;
  padding: @length2;
  border: 5px solid tomato;
}

Или даже приведенного ниже будет достаточно, если --strict-math включен во время компиляции:

h1 {
  --length: 40px;
  @length: var(--length);
  @length2: calc(@length * 2);
  line-height: @length;
  padding: @length2;
  border: 5px solid tomato;
}

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

... Однако обратите внимание, что calc() можно использовать для действительного достижения того же самого, например:

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

Функции var() заменяются во время вычисляемого значения...

person Harry    schedule 01.03.2016