LESS - confusion about how mixins take parameters

Question

I am using LESS and BOOTSTRAP for a website, and this is my first time actually using the less language, so this entire "mixins" thing is really confusing to me. I have read all of the documentation on the dotless website, and on the bootstrap site, but the actual "way" to use some of the mixins is escaping me.

In specific, I am having a hard time understanding how you discern what passes as a valid parameter. I am attempting to do with with transitions/transforms, using the following CSS...

-webkit-transform-origin:       top;
-webkit-transition:             all 0.2s linear;
-webkit-transform:              scale(1, 0);
-webkit-animation-fill-mode:    forwards;

-moz-transform-origin:          top;
-moz-transition:                all 0.2s linear;
-moz-transform:                 scale(1, 0);
-moz-animation-fill-mode:       forwards;

-ms-transform-origin:           top;
-ms-transition:                 all 0.2s linear;
-ms-transform:                  scale(1, 0);
-ms-animation-fill-mode:        forwards;

-o-transform-origin:            top;
-o-transition:                  all 0.2s linear;
-o-transform:                   scale(1, 0);
-o-animation-fill-mode:         forwards;

transform-origin:               top;
transition:                     all 0.2s linear;
transform:                      scale(1, 0);
animation-fill-mode:            forwards;

From what I grasp, I am supposed to be able to do this in a much simpler format using the mixins built into bootstraps. The mixins are declared as follows;

// Transitions
.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

// Transformations
.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

But I am not entirely clear on how this works. I cannot seem to figure out what "parameters" to pass through @transition and the like to make this code work. Can anyone help me out here? I am just kind of lost.

Answer 1

Whatever text you pass to an @variable when you use the mixin in a selector block will be copied to the places where the @variables appear in the mixins, and the contents of the mixins will be placed in your block. You can consider mixins somewhat like placeholder functions.

That means that if you declare a selector like:

div p:first-child {
     .transition(width 2s ease-in-out, color 2s;);
     color: red;
}

Using the .transition mixin you listed above, the Less processor will generate a CSS like:

div p:first-child {
     -webkit-transition: width 2s ease-in-out, color 2s;
     transition: width 2s ease-in-out, color 2s;
     color: #FF0000;
}

The semicolon is important at the end of the argument otherwise Less may get confused and think you are sending two parameters, since comma-separated parameters are also valid. It won't be a problem in this case (since there is no .transition mixin that accepts two arguments), but it's good practice to always separate arguments with semicolons.

So to use the mixins, simply place them where you would add CSS declarations, end them with a semicolon, and pass the parameters as arguments.

Less does no duplication detection, so if you call the mixin twice, it just copies the replaced contents twice. If you already have a transition: property, for example, the mixin will add another one and its effect may be lost if yours comes after.

The best place to learn about Less, variables and mixins in at http://lesscss.org which has the full documentation in a few pages with plenty of examples. It's also great to have an editor which converts your Less files into CSS in real time so you understand how it works.

For the example you posted, you could create a mixin like the following:

.your-mixin(@origin, @transition, @transform, @anim-fill-mode) {
     -webkit-transform-origin:    @origin;
     -webkit-transition:          @transition;
     -webkit-transform:           @transform;
     -webkit-animation-fill-mode: @anim-fill-mode;

     -moz-transform-origin:    @origin;
     -moz-transition:          @transition;
     -moz-transform:           @transform;
     -moz-animation-fill-mode: @anim-fill-mode;

     -ms-transform-origin:    @origin;
     -ms-transition:          @transition;
     -ms-transform:           @transform;
     -ms-animation-fill-mode: @anim-fill-mode;

     -o-transform-origin:    @origin;
     -o-transition:          @transition;
     -o-transform:           @transform;
     -o-animation-fill-mode: @anim-fill-mode;

     transform-origin:    @origin;
     transition:          @transition;
     transform:           @transform;
     animation-fill-mode: @anim-fill-mode;
}

To use it, you add it inside a selector block where you want the properties copied to:

.your-selector, .other-selector {
    .your-mixin(top; all 0.2s linear; scale(1, 0); forwards;);
}