Как вызвать бутстрап LESS-градиенты

Смешивание вертикального градиента Bootstrap определяется следующим образом:

#gradient {
  .vertical (@start-color, @end-color) when (@disable-filters)  {
    /* code */
  }
}

Я звоню .#gradient > .vertical(#fff, #ddd); в свой МЕНЬШЕ. Но компиляция дает мне следующую ошибку.

ParseError: Syntax Error on line 104 in front.less:104:8
103         border-bottom: 2px solid white;
104         .#gradient > .vertical(#fff, #ddd);
105       }

Комментируя вышеприведенную строку, проблема устранена. Каким образом можно вызвать метод вертикального градиента Bootstrap?

Ответ 1

Я думаю, что может быть опечатка в документах Bootstrap v2.2.2 для некоторых градиентных микшинов. Если вы проверите файл mixins.less, похоже, вам не нужна ведущая точка при вызове градиентного микса, т.е. #gradient > .vertical(# 999, #fff);

У меня это работает.

На html-странице у меня есть div с идентификатором = gradient-test

В моем пользовательском mixin я:

#gradient-test{  
#gradient > .vertical(#999, #fff);  
}

Удачи!

Ответ 2

Идея такая же в Bootstrap 3 (как предложил Дэвид Тайароа), и, кроме того, есть два дополнительных параметра, которые вы можете передать, чтобы контролировать, как выглядит градиент:

.vertical(@start-color; @end-color; @start-percent; @end-percent)

Итак, например, вы можете сделать что-то вроде следующего в вашем файле custom.less:

@import '../less/bootstrap.less';

.promo-content{
  #gradient.vertical(#fff; #c3c3c3; 0%; 10%);
  height:100px;
  .text-center;
  padding-top: 25px;
  margin-bottom: 10px;
  border:1px solid #e2e2e2;
}

.promo-content2{
  #gradient.vertical(#fff; #c3c3c3; 0%; 90%);
}

И вы получите следующие результаты: