Gradient mixin in Bootstrap?

There is a mixin in Bootstrap's theme.less file, that I'm trying to understand. I'm very new to LESS so just trying to learn as much as possible, while still getting work done LOL.

The core mixin is like so:

#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

}

The mixin for button styles is like so:

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

I'm trying to understand how to use this... Do I need a parent element with an id of #gradient and a child element of .vertical ? The rest I can figure out, like setting the colors, etc.

On a side note, I originally thought that the #gradient > .vertical was a comparison operator, but that's incorrect right? Its just a CSS child selector right?

Maybe I'm going the wrong direction, but I appreciate the help. Thank you so much!

Answers


It's done like so using the horizontal as the example. Just fill in the @start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 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;
 }

You gotta google for some LESS tutorials, once you've gone through a few of them you'll figure it out.


Need Your Help

Adding Similar Items Together in a Javascript Array

javascript arrays sorting multidimensional-array

I'm trying to loop through an array in order to group and count totals.

Why Hadoop using namenode and datanode?

hadoop

We know that servers which used for big data processing should be tolerant with hardware failure. I mean, if we had 3 server (A, B, C) and suddenly the B server is down, A and C could replace it po...