CODEWITHSUNDEEP
csstwitter-bootstraplessgradientmixins
Megaroeny
Megaroeny

Reputation: 827

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!

Upvotes: 4

Views: 12526

Answers (1)

Christina
Christina

Reputation: 34652

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.

Upvotes: 4

Related Questions