Подтвердить что ты не робот

LESS смешивает имя переменной класса

Я использую Font Awesome 4.0.0 и хочу сделать что-то вроде этого в LESS:

.btn-github {
  .btn;
  .btn-primary;
  margin-left: 3em;

  i {
    [email protected]{fa-css-prefix};
    [email protected]{fa-css-prefix}-github;
    [email protected]{fa-css-prefix}-lg;
    margin-right: 1em;
  }
}

Это не скомпилируется с ошибкой:

ParseError: Unrecognised input in - on line ...

Можно ли это сделать? Это, безусловно, сделало бы красивую кнопку для меня.

Ответ 1

Есть как минимум 2 проблемы с тем, что вы пытаетесь сделать (для LESS >= 1.6 см. ниже:):

1) К сожалению, невозможно вызвать mixin с помощью селектора интерполяция.

С селекторной интерполяцией LESS ожидает, что конструкция будет иметь следующий формат:

[email protected]{selector-string} { property:value; }

(интерполированный селектор может иметь также статическую строку pre или после интерполяции)

так

[email protected]{selector-string};

Не распознается компилятором LESS. Подробнее см. Здесь: Как я могу вызвать mixin по ссылке в LESS?

2) Набор правил с интерполированным селектором напрямую печатается на выходе CSS и не существует в качестве микширования, который можно повторно использовать при запуске LESS

Например:

@foo: test;

[email protected]{foo} {
  length: 20px;
}

.bar {
  .test;
}

вернется:

    Name error: .test is undefined
    .bar {  .test;}

Подробнее об этом здесь: МЕНЬШЕ CSS: Повторное использование сгенерировано. @{name} класс как mixin

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

@fa-var-github: "\f09b";

.fa-mixin() {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-mixin-lg() {
  font-size: (4em / 3);
  line-height: (3em / 4);
  vertical-align: -15%;
}
.fa-mixin-icon(@icon){
  @var: "[email protected]{icon}";
  &:before { content: @@var; }
}
i {
  .fa-mixin;
  .fa-mixin-lg;
  .fa-mixin-icon(github);
}

Если вам действительно не нужны переменные и просто нужно включить эти правила, лучшим способом было бы просто импортировать скомпилированную версию CSS FibreSwesome с CSS (см. ответ здесь):

@import (less) 'font-awesome.css';

а затем вы можете просто использовать правила CSS, такие как LESS mixins, или расширить свои селектора по своему усмотрению, и они должны работать отлично.

Обновление:

В соответствии с правилами МЕНЬШЕ >= 1.6 с интерполированными селекторами можно получить доступ как mixins... поэтому форма ограничения № 2 выше не применяется больше (но вы все еще не можете динамически вызывать mixin с интерполяция). Поэтому вы можете просто вызвать LESS mixins и переменные из импортированного файла font-awesome.less следующим образом:

i {
  .fa;
  .fa-lg;
  &:before{
    content: @fa-var-github;
  }
}