web-dev-qa-db-fra.com

Comment appeler les mixins dégradés de Bootstrap

Le Bootstrap mixin de gradient vertical est défini comme suit:

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

J'appelle .#gradient > .vertical(#fff, #ddd); dans mon MOINS. Mais la compilation me donne l'erreur suivante.

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

Commenter la ligne ci-dessus résout le problème. Quelle est la bonne façon d'invoquer le mixage à gradient vertical de Bootstrap?

twitter-bootstrapless
21
Matm

Je pense qu'il peut y avoir une faute de frappe dans les documents Bootstrap v2.2.2 pour certains des mixins dégradés. Si vous vérifiez le fichier mixins.less, il semble que vous n'ayez pas besoin du premier point lorsque appeler le dégradé mixin, c'est-à-dire #gradient> .vertical (# 999, #fff);

J'ai ce travail.

Sur une page html j'ai un div avec ID = gradient-test

Dans mon mixin personnalisé, j'ai:

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

Bonne chance!

27
David Taiaroa

L'idée est la même dans Bootstrap 3 (comme l'a suggéré David Taiaroa) et en plus il y a deux paramètres supplémentaires que vous pouvez passer pour contrôler l'apparence du dégradé:

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

Ainsi, par exemple, vous pouvez faire quelque chose comme ce qui suit dans votre custom.less fichier:

@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%);
}

Et vous obtiendrez les résultats suivants:

enter image description here

30
AJ Meyghani