Слэши (`/`) в значениях CSS при использовании Less (например, в сокращении шрифта)

я заметил проблему при использовании Less with font shorthand

.font(@weight: 300, @size: 22px, @height: 32px) {
    font: @weight @size/@height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
}

выше не выполняется с

this.a.toCSS is not a function
http://localhost/tumblr/modern1/css/style.less on line 1, column 0:
1. @highlight: #cb1e16;
2. @shade1: #cb1e16;

когда я разделяю свойства вверх, он работает

.font(@weight: 300, @size: 22px, @height: 32px) {
  font-weight: @weight;
  font-size: @size;
  line-height: @height;
  font-family: "Yanone Kaffeesatz", "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;

}

Я думаю, что из-за ошибки/проблемы, вызывающей проблему, я думаю, так как Less может делать вычисления, например. 2px + 5 = 7px его попытка сделать разделение?

Ответы

Ответ 1

Просто столкнулся с этой проблемой, функция escape (для less.js в любом случае): е() Как этот

font: @weight @size e('/') @height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;

Ответ 2

Символ прямой косой черты / вызывает компилятор LESS для разделения размера шрифта на высоту строки. Вы можете:

  • Разделите свой CSS на не-стенографические, отдельные правила

    font-size: @size; line-height: @height;

  • Сбросьте некоторые или все правила сокращения шрифтов LESS. Сама черта / - лучшая часть для спасения. Вы можете использовать синтаксис e, e("/") escape или более новую, более документальную тильду-цитату ~"/". Вы также можете использовать синтаксис LSS string @{} для вставки ваших переменных.

Попробуйте следующее:

font: @weight @size~"/"@height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;

Или это:

font: @weight ~"@{size}/@{height}" "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;

Ответ 3

МЕНЬЕ 1.4 и выше теперь имеют опцию "strictMath", которая разрешает двусмысленность между сокращением шрифта и шрифтом. В 1.4 он по умолчанию отключен, чтобы сделать переход проще, но в более поздних версиях он будет включен по умолчанию.

Смотрите 1.4 примечания здесь

Когда strictMath включен, все математические операции должны быть завернуты в круглую скобку (10px / 5px), а прямая косая черта в коротком шрифте не будет интерпретироваться как деление.