Универсальный "вендорский миксин" - PullRequest
Новая
       64

Универсальный "вендорский миксин"

2 голосов
/ 16 августа 2011

Определение миксинов поставщиков является обычной задачей в LESS, а именно: 

.box-shadow() {
    -moz-box-shadow:@arguments;
    -webkit-box-shadow:@arguments;
    -o-box-shadow:@arguments;
    -ms-box-shadow:@arguments;
    box-shadow:@arguments;
}

.border-radius() {
    -moz-border-radius:@arguments;
    -webkit-border-radius:@arguments;
    -o-border-radius:@arguments;
    -ms-border-radius:@arguments;
    border-radius:@arguments;
}

...

Но, кажется, немного повторяется ...

То, что я хотел бы, является универсальным vendor mixin, который делает это для меня, то есть: 

.vendors(@prop, @val) {
    -moz-@prop:@val;
    -webkit-@prop:@val;
    -o-@prop:@val;
    -ms-@prop:@val;
    @prop:@val;
}

Тогда определение box-shadow mixin будет так просто: 

.box-shadow() {
    .vendors(box-shadow, @arguments);
}

Проблема в моем .vendorsmixin не компилируется ...

Я пытался: 

.vendors(@prop, @val) {
    -moz-@prop: @val;        /* Error */
    ~"-moz-@{prop}": @val;   /* Error */
    ~`"-moz-@{prop}": @val;  /* Error */
}

У вас есть идея, как это сделать?

Приветствия

Ответы [ 3 ]

4 голосов
/ 05 октября 2011

Стилус имеет это, которое называется Интерполяция , например: 

vendor(prop, args)
  -webkit-{prop} args
  -moz-{prop} args
  {prop} args

border-radius()
  vendor('border-radius', arguments)

box-shadow()
  vendor('box-shadow', arguments)

- Тогда 

button
  border-radius 1px 2px / 3px 4px

дает:

button {
  -webkit-border-radius: 1px 2px / 3px 4px;
  -moz-border-radius: 1px 2px / 3px 4px;
  border-radius: 1px 2px / 3px 4px;
}

\ o /

0 голосов
/ 19 мая 2015

Я уверен, что теперь меньше. Я использовал этот код в проекте Meteor.js: 

.vendor(@property, @value) {
  -webkit-@{property}: @value;
  -khtml-@{property}: @value;
  -moz-@{property}: @value;
  -ms-@{property}: @value;
  -o-@{property}: @value;
  @{property}: @value;
}

.vertical-align {
  position: relative;
  top: 50%;
  .vendor(transformY, -25%);
}
0 голосов
/ 06 ноября 2013

Другой вариант, который я считаю немного чище, - это создать список поставщиков, а затем выполнить итерацию по этому списку, чтобы создать нужные стили. Вот пример: 

ALLVENDORS = webkit moz o ms w3c

vendors(prop, args)
  for vendor in ALLVENDORS
    if vendor == w3c
      {prop}: args
    else
      -{vendor}-{prop}: args

Это создает список поставщиков, которых вы хотите поддержать, а затем позволяет вам использовать их повторно. если позже вы решите, что хотите поддерживать другой префикс или хотите удалить его, все, что вам нужно сделать, это удалить его из списка.

И тогда вы будете использовать список, как показано выше: 

border-radius()
  vendors(border-radius, arguments)

box-shadow()
  vendor(box-shadow, arguments)
...