Bootstrap 3 translate mixin

Question

How to add values on the translate mixin? I want to have these values on the Y coordinate:

-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);

The bootstrap mixin:

.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
  -ms-transform: translate(@x, @y); // IE9 only
   -o-transform: translate(@x, @y);
      transform: translate(@x, @y);
}

How can I add 50% on the Y coordinate??? I have tried:

.translate(@y: 50%);

But I get an error, any ideas???

Sorry mate, I answered the question and only then realized that I could have totally misunderstood you as I see a `-50%` in place and a `50%` in another with a statement that you want to add 50%. Are you looking to add translation to an already translated element (or) does my solution address your question? — Harry, Jan 14 '15 at 10:17
That's fine, I got that, I just needed a real life example and you provided one. Spot on!! Thanks!! — Augusto Triste, Jan 14 '15 at 10:54

score 4 · Accepted Answer · edited May 23 '17 at 12:00

Note: Using Less mixins for vendor prefixing is not good practice and this answer does not make any attempts to recommend it. It only provides a straight answer to the question that was asked. If you are interested in knowing the recommended approach for vendor prefixing, have a loot at Bass Jobsen's answer in this thread.

Why does your mixin call not work?

Whenever a mixin call is made, Less only invokes the mixin if all the parameters have a value (either a default value or a value passed in the mixin call).

In this case, the bootstrap translate mixin has 2 parameters (with no default values) and the mixin call has only one parameter. Because of this, the mixin would never get invoked/processed.

What is the solution to the problem?

In order to overcome this, you could just pass 0 (or 0%) to the @x parameter like

.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
  -ms-transform: translate(@x, @y); // IE9 only
  -o-transform: translate(@x, @y);
  transform: translate(@x, @y);
}

div{
  .translate(@x: 0%;@y: 50%);
}

This would produce an output which is essentially equivalent to a translation only in Y axis (as can be seen in this simple sample).

The below is the output

div {
  -webkit-transform: translate(0%, 50%);
  -ms-transform: translate(0%, 50%);
  -o-transform: translate(0%, 50%);
  transform: translate(0%, 50%);
}

and it is equivalent to

div {
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  -o-transform: translateY(50%);
  transform: translateY(50%);
}

Yes. My downvote is just to balance yours and Bass answers. While your answer is perfectly correct and useful in general, the point is that Bootstrap vendor mixins are deprecated and the OP should not use them in first place. — seven-phases-max, Feb 20 '16 at 13:59

score 2 · Answer 2 · edited May 23 '17 at 11:51

The accepted answer by @harry solves your issue indeed, but the consensus is that you should use (the) a postprocess autoprefixer to set your vendor prefixes for best practice. see also: LESS transition mixin with prefixes

The Less autoprefix plugin can be found at: https://github.com/less/less-plugin-autoprefix.

After installing the you can run:

echo "div {transform: translateY(-50%);}" | lessc - --autoprefix="last 20 versions"

the above outputs:

div {
  -webkit-transform: translateY(50%);
     -moz-transform: translateY(50%);
      -ms-transform: translateY(50%);
       -o-transform: translateY(50%);
          transform: translateY(50%);
}

To be compatible with Boostrap you should run:

echo "div {transform: translateY(-50%);}" | lessc - --autoprefix="Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6"

The above command has specified the same browsers as the default Bootstrap build process. You should notice that also Bootstrap uses the autoprefixer since v3.2. The preceding can be seem when inspecting the source of Bootstrap's less/vendor-prefixes.less:

Vendor Prefixes

All vendor mixins are deprecated as of v3.2.0 due to the introduction of Autoprefixer in our Gruntfile. They will be removed in v4.

Bootstrap 3 translate mixin

2 Answers2