Как использовать font-face с cssless? - PullRequest
Новая
       16

Как использовать font-face с cssless?

5 голосов
/ 24 марта 2012

Уже было немного разговоров о проблемах с cssless и font-face, например, здесь: Как мы можем использовать @ font-face в Less

Но эта проблема, похоже, другая, и мне интересно, нашел ли кто-нибудь решение этой проблемы? Я думаю, что мой менее синтаксис правильный.

Если я напишу следующее: 

.setFont (@fontName) {
    @font-face {
        font-family: '@{fontName}';
        src: url('../fonts/@{fontName}.eot'); 
        src: url('../fonts/@{fontName}.eot?#iefix') format('embedded-opentype'), 
        url('../fonts/@{fontName}.ttf')  format('truetype');
    }
}
.setFont ('myfont1');   
.setFont ('myfont2');   
.setFont ('myfont3');

Будет выведено следующее: 

@font-face {
  font-family: 'myfont1';
  src: url('../fonts/myfont1.eot');
  src: url('../fonts/myfont1.eot?#iefix') format('embedded-opentype'),
  url('../fonts/myfont1.ttf') format('truetype');
}
@font-face {
  font-family: 'myfont1';
  src: url('../fonts/myfont1.eot');
  src: url('../fonts/myfont1.eot?#iefix') format('embedded-opentype'),
  url('../fonts/myfont1.ttf') format('truetype');
}
@font-face {
  font-family: 'myfont1';
  src: url('../fonts/myfont1.eot');
  src: url('../fonts/myfont1.eot?#iefix') format('embedded-opentype'),
  url('../fonts/myfont1.ttf') format('truetype');
}

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

Как вы используете cssless с font-face?

Спасибо.

1 Ответ

2 голосов
/ 24 марта 2012

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

Поэтому, когда вы определяете @fontName в первый раз, он не может быть переопределен. Вот почему вы получаете дубликаты. К сожалению, вы не можете использовать их как параметры (например, установить border-radius (@radius), что похоже на то, что вы надеялись сделать. Это нюанс, но есть разница.

То, как вы используете его, - это переменная (константа), то, как вы хотели бы использовать ее, но не можете, как параметрический миксин. Если это легче думать об этом с точки зрения объема. В этом случае вы устанавливаете глобальную переменную, а не локальную переменную для этого конкретного селектора. Например, когда вы устанавливаете border-radius, вы устанавливаете его в селекторе, тем самым делая его локальной переменной для этого селектора. В приведенном выше примере вы не применяете .setFont к селектору, где он может использоваться как локальная переменная, а вместо этого устанавливаете его как глобальную.

Единственный способ справиться с этим - использовать @arguments, но для этого может потребоваться столько же кода, сколько и для записи отдельных операторов @ font-face. Поскольку @ font-face сам по себе является селектором, он всегда будет использоваться способом, который рассматривает переменные, используемые в качестве ссылки, как глобальные.

...