Gradient mixin in Bootstrap?

Question

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!

score 4 · Accepted Answer · answered Dec 04 '13 at 01:36

4

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.

answered Dec 04 '13 at 01:36

Christina

34,296
17
83
119

Oh ok! So in your example you have the '#gradient' on the same element as the '.horizontal'. Bootstrap has it as a child element. Is this just how their HTML is? I need to take a look at it again. FYI I'm the same person that just commented on the Bootstrap retina mixin on GitHub LOL! (Jaminroe) So hello again! LOL – Megaroeny Dec 04 '13 at 02:09
1

Cool. The #gradient and a dot, like a #div.classname kinda set up, I think they are just linking them together that way so as not to confuse usage. It's #gradient.gradientmixinname(something;something;...) – Christina Dec 04 '13 at 02:33
1

http://lesselements.com/ - the usage is in the left column. So download the file (https://github.com/dmitryf/elements/blob/master/elements.less). You don't need to include it as I believe BS3 has a lot of these and the names might conflict, but you'll see how to use and see what code was used to create and then when you see other mixins, you'll go, "oh, yeah." – Christina Dec 04 '13 at 02:42
Thanks so much again! I'm also hoping that the Visual Studio plugin I purchased to support and compile LESS will support Source Maps soon. That way I can also see which file and line in the less the CSS is coming from. – Megaroeny Dec 04 '13 at 02:51
1

In my import file I stick in the source so I know where it came from. Here's mine. I heavily modify stuff and use my own less files, but you'll get the idea. http://jsbin.com/EWImazob/1/edit – Christina Dec 04 '13 at 02:55
Ok. So the `>` in `#gradient > .horizontal` isn't actually a child selector? It's a link like you mentioned, for LESS? Didn't know you could write it that way. – Megaroeny Dec 04 '13 at 03:51
it's more like a way to indicate that .horizontal is only a child of #gradient (or anything in the #gradient brackets is a child mixin of that parent), but you use it like #gradient.suchandsuch(... – Christina Dec 04 '13 at 03:54
There is no > in my mixins.less 3.0.3 from the repo. Download the latest Bootstrap. – Christina Dec 04 '13 at 03:55
Right, not in the mixins.less. It's in the theme.less. Look here, this line number: https://github.com/twbs/bootstrap/blob/master/less/theme.less#L35 Also, could you move this to Chat? I'm just 2 reputation shy of being able to do so :( – Megaroeny Dec 04 '13 at 04:10
1

Won't let me move it to chat. Yes, I see, that's another way to write it. Exactly the same output css. Chat depends on both reps, I guess. – Christina Dec 04 '13 at 04:23
Ok cool. Was looking at the LESS docs, and I think this is what it is: http://lesscss.org/#-namespaces . Thanks again – Megaroeny Dec 04 '13 at 04:25
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/42449/discussion-between-christina-arasmo-beymer-and-jaminroe) – Christina Dec 04 '13 at 04:27

Gradient mixin in Bootstrap?

1 Answers1