Bootstrap 3 translate mixin

Question

Как добавить значения в переводе mixin? Я хочу, чтобы эти значения на Y координаты:

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

бутстрапа подмешать:

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

Как я могу добавить 50% на Y координаты ??? Я пробовал:

.translate(@y: 50%); 

Но я получаю сообщение об ошибке, любые идеи ???

Answer 1

Примечание: Использование Меньше Примеси для поставщика префиксов не является хорошей практикой и этот ответ не делает никаких попыток, чтобы рекомендовать его. Он дает только прямой ответ на заданный вопрос. Если вы заинтересованы в том, чтобы узнать рекомендуемый подход к префиксам поставщиков, возьмите добычу у answer in this thread Bass Jobsen.

Почему ваш вызов mixin не работает?

Всякий раз, когда выполняется вызов mixin, Less только вызывает mixin, если все параметры имеют значение (либо значение по умолчанию, либо значение, переданное в вызове mixin).

В этом случае mixstock translate mixin имеет 2 параметра (без значений по умолчанию), а вызов mixin имеет только один параметр. Из-за этого mixin никогда не будет вызван/обработан.

---

Какое решение возникло из-за проблемы?

Чтобы преодолеть это, вы могли бы просто передать 0 (или 0%) для параметра @x как

.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%); 
} 

Это будет производить вывод, который, по существу, эквивалентно трансляции только по оси Y (как можно увидеть в this simple sample).

Ниже является выход

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

и это эквивалентно

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

Answer 2

Принятый ответ на @harry решает проблему в самом деле, но консенсус в том, что вы должны используйте (a) постпроцессорный автоприемник, чтобы установить префиксы вашего поставщика для лучшей практики. см. Также: LESS transition mixin with prefixes

Плагин Lesser autoprefix можно найти по адресу: https://github.com/less/less-plugin-autoprefix.

После установки вы можете запустить:

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

вышеуказанные выходы:

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

Для совместимости с Boostrap вы должны запустить:

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

Вышеуказанная команда уточнила те же браузеры, что и процесс сборки Bootstrap по умолчанию. Вы должны заметить, что Bootstrap также использует autoprefixer с версии v3.2. Предшествующее может показаться при проверке источника бутстраповского меньше/поставщика-prefixes.less:

префиксы

Все поставщика Примеси являются устаревшим v3.2.0 в связи с введением Autoprefixer в нашем Gruntfile. Они будут удалены в v4.