Косые черты (`/`) в значениях CSS при использовании Less (например, в сокращенной записи `font`) - PullRequest
Новая
       3

Косые черты (`/`) в значениях CSS при использовании Less (например, в сокращенной записи `font`)

14 голосов
/ 22 июня 2010

Я заметил проблему при использовании Less с сокращенным шрифтом 

.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;

}

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

Ответы [ 3 ]

21 голосов
/ 19 ноября 2010

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

font: @weight @size e('/') @height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
14 голосов
/ 07 сентября 2011

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

  1. Разделить свой CSS на не сокращенные, отдельные правила

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

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

Попробуйте: 

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

Или вот: 

font: @weight ~"@{size}/@{height}" "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
2 голосов
/ 22 августа 2013

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

См. Примечания 1.4 здесь

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

...