Gradient mixin dans le Bootstrap?

Il y a un mixin dans le Bootstrap thème.moins fichier, que j'essaie de comprendre. Je suis très nouveau pour les MOINS juste essayer d'apprendre autant que possible, tout en continuant à faire le travail LOL.

La base mixin est comme suit:

#gradient {

  //Vertical gradient, from top to bottom
  //
  //Creates two color stops, start and end, by specifying a color and position for each color stop.
  //Color stops are not available in IE9 and below.
  .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
  background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); //Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); //Safari 5.1+, Chrome 10+
  background-image:  -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); //FF 3.6+
  background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); //Standard, IE10
  background-repeat: repeat-x;
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); //IE9 and down

}

Le mixin pour les styles de boutons, c'est comme si:

.btn-styles(@btn-color: #555) {
     #gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
     ...

J'essaie de comprendre comment utiliser ce... ai-je besoin d'un parent de l'élément avec un id de #gradient et un élément enfant de .vertical ? Le reste je peux comprendre, comme le réglage des couleurs, etc.

Sur une note de côté, je pensais que le #gradient > .vertical est un opérateur de comparaison, mais c'est incorrect droit? C'est juste un CSS sélecteur d'enfant droit?

Je vais peut-être la mauvaise direction, mais j'apprécie l'aide. Merci beaucoup!

OriginalL'auteur jaminroe | 2013-12-04

  1. 4

    C'est fait comme à l'aide de l'horizontale comme dans l'exemple. Il vous suffit de remplir le @start-color: #555; @end-color: #333; @start-pourcentage: 0%; @end%: 100%:

    //USAGE
#myboxwithagradient {
  #gradient.horizontal(#555;#333;0%;100%);
  width:100%;
  height:50px;
  float:left;
}


//OUTPUT
#myboxwithagradient {
  background-image: -webkit-gradient(linear, 0% top, 100% top, from(#555555), to(#333333));
  background-image: -webkit-linear-gradient(left, color-stop(#555555 0%), color-stop(#333333 100%));
  background-image: -moz-linear-gradient(left, #555555 0%, #333333 100%);
  background-image: linear-gradient(to right, #555555 0%, #333333 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=1);
  width:100%;
  height:50px;
  float:left;
 }

    Vous avez obtenu de google pour certains MOINS tutoriels, une fois que vous êtes allé à travers quelques-uns d'entre eux, vous allez comprendre.

    Ah ok! Donc dans votre exemple, vous avez le "#gradient' est sur le même élément que le".horizontale". Bootstrap a comme un enfant de l'élément. Est-ce juste la façon dont leur code HTML est? J'ai besoin de prendre un coup d'oeil à nouveau. Pour info je suis la même personne qui a simplement commenté le Bootstrap de la rétine mixin sur GitHub LOL! (Jaminroe) Donc, bonjour à nouveau! LOL
    Cool. Le #dégradé et par un point, comme un #div.classname un peu, alors je pense qu'ils sont juste de les lier ensemble afin de ne pas confondre l'utilisation. Il est #dégradé.gradientmixinname(quelque chose;quelque chose;...)
    lesselements.com - l'utilisation est dans la colonne de gauche. Afin de télécharger le fichier (github.com/dmitryf/elements/blob/master/elements.less). Vous n'avez pas besoin de l'inclure comme je le crois, BS3 a beaucoup de ceux-ci et les noms peuvent être en conflit, mais vous allez voir comment utiliser et voir ce code a été utilisé pour créer et puis quand vous voyez d'autres mixin, vous allez aller, "oh, oui."
    Dans mon fichier d'importation je m'en tiens à la source donc je sais d'où il vient. Voici la mienne. J'ai fortement modifier des trucs et utiliser mon propre moins de fichiers, mais vous obtenez l'idée. jsbin.com/EWImazob/1/edit
    Je ne peux pas me déplacer pour le chat. Oui, je vois, c'est une autre façon de l'écrire. Exactement le même résultat css. Chat dépend à la fois de répétitions, je suppose.

    OriginalL'auteur Christina