.less выходная переменная без объявления

Я знаю, что вы можете сделать это в SASS

@pxtoem(@target, @context) {
 (@target/@context)+0em }

.something{
  font-size: @pxtoem(24, 16);
}

Возможно ли это в .less? Извините, мое понимание здесь довольно ограничено, но мне кажется, что .less ожидает, что расчет выведет объявление css?

Чтобы быть ясным, я не хочу иметь миксин каждый раз, когда мне нужно это использовать (положение bg, размер шрифта, высота строки и т. Д.)

Спасибо


less
person user1010892    schedule 08.02.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Да, из миксинов LESS выводит объявления CSS или переменную, но не значение.

Лучшее для вашей ситуации

Самый простой способ получить то, что вы хотите, - избежать миксинов и просто использовать обычные операции и функцию unit():

.something {
    font-size: unit(24 / 16, em);
}

Выходы:

.something {
  font-size: 1.5em;
}

Вывод переменной

Переменная может быть выведена, но она по-прежнему будет работать с нормальной областью видимости и «постоянным» типом поведения переменной LESS. Итак, рассмотрим следующий код. Он показывает, что использованный один раз, он работает нормально (# 1), но дважды дает только окончательное значение, рассчитанное для обоих элементов (# 2), чтобы избежать этого, если вам нужно вызвать его больше, чем один раз для каждого блока класса вам нужно будет серьезно вложить миксины в этот класс (# 3).

.divideToEm(@target, @context) {
   @divideToEm: (@target / @context) + 0em;
}

.something { /* #1 */
   .divideToEm(24, 16);
   font-size: @divideToEm;
}

.somethingElse { /* #2 */
   .divideToEm(24, 16);
   font-size: @divideToEm;
   .divideToEm(12, 24);
   margin-right: @divideToEm;
}

.somethingElse2 { /* #3 */
   .setSize() {
   .divideToEm(24, 16);
    font-size: @divideToEm;
   }
   .setMargin() {
   .divideToEm(12, 24);
   margin-right: @divideToEm;
  }
  .setSize();
  .setMargin();
}

Выходы:

.something {
  font-size: 1.5em;
}
.somethingElse {
  font-size: 0.5em; /* <-- probably NOT expected */
  margin-right: 0.5em;
}
.somethingElse2 {
  font-size: 1.5em;
  margin-right: 0.5em;
}
person ScottS    schedule 08.02.2013
comment
Спасибо за такой фантастический и подробный ответ. Думаю, я воспользуюсь функцией юнитов ... но мне начинает казаться, что я нахально выигрываю. - person user1010892; 11.02.2013
comment
Просто в случае, если кто-нибудь еще посмотрит на это. Единичная функция была меньше 1.3.2. Думал, что это может быть полезно, так как я только что потратил 2 часа на размышления, почему он не компилируется, когда мой компилятор устарел! - person user1010892; 13.02.2013