title: LESS - confusion about how mixins take parameters
body: <p>I am using <code>LESS</code> and <code>BOOTSTRAP</code> for a website, and this is my first time actually using the <code>less</code> 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. </p>
  
  <p>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...</p>
  
  <pre><code>-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;
  </code></pre>
  
  <p>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;</p>
  
  <pre><code>// 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;
  }
  </code></pre>
  
  <p>But I am not entirely clear on how this works. I cannot seem to figure out what "parameters" to pass through <code>@transition</code> and the like to make this code work. Can anyone help me out here? I am just kind of lost.</p>