Как передать параметры с запятыми в Менее

У меня есть mixin, который берет имя формы и ее координат. Мне интересно, как бы передать мои координаты, если координаты содержат запятые?Как передать параметры с запятыми в Менее

.clip-path(@shape @coords) { 
    -webkit-clip-path: @shape(@coords); 
     -moz-clip-path: @shape(@coords); 
      clip-path: @shape(@coords); 
} 

.foo { 
    .clip-path(polygon, 0 0, 0 100%, 100% 0); 

    /* 
    I am trying to achieve: 
    clip-path: polygon(0 0, 0 100%, 100% 0); 
    */ 
}

источник

2016-03-07 Jon

Я не думаю, что Firefox требует префикса, но он также не поддерживает формы AFAIK. Кроме того, я полагаю, вы знаете, что это не будет работать в IE. В любом случае вместо написания LESS mixin для каждого свойства, которому может потребоваться префикс, я предлагаю добавить инструмент префикса к вашей toolchain, который будет правильно добавлять все правильные префиксы. –

Примечание: Завершите все комментарии, сделанные torazaburo. Пожалуйста, не используйте Less mixins как способ добавления префиксов. Гораздо проще использовать инструмент префикса, такой как AutoPrefixer или Prefix-free.

Тем не менее, ниже приведены несколько способов, которыми вы можете достичь вывод, что вы ищете:

.clip-path(@shape, @coords) { 
    -webkit-clip-path: ~"@{shape}(@{coords})"; 
    -moz-clip-path: ~"@{shape}(@{coords})"; 
    clip-path: ~"@{shape}(@{coords})"; /* use interpolation to display the output */ 
} 

.foo { 
    .clip-path(polygon, ~"0 0, 0 100%, 100% 0"); /* pass the values as one single string */ 
}

Или используют advanced @rest variable option, как показано ниже. Это способ передать переменное количество аргументов в mixin и по-прежнему сопоставлять определение mixin.

.clip-path(@shape; @coords...) { 
    -webkit-clip-path: ~"@{shape}(@{coords})"; 
    -moz-clip-path: ~"@{shape}(@{coords})"; 
    clip-path: ~"@{shape}(@{coords})"; 
} 

.foo { 
    .clip-path(polygon; 0 0, 0 100%, 100% 0); 
} 
.foo2 { 
    .clip-path(polygon; 0 0, 0 100%, 100% 0, 100% 100%); /* Less compiler will pick all values after the first as coords */ 
}

В качестве альтернативы, если Mixin только добавить префиксы (которые я не рекомендую, как уже упоминалось ранее), самый простой вариант был бы ниже:

.clip-path(@args) { 
    -webkit-clip-path: @args; 
    -moz-clip-path: @args; 
    clip-path: @args; 
} 

.foo { 
    .clip-path(~"polygon(0 0, 0 100%, 100% 0)"); /* just pass the whole thing as a string */ 
}

источник

2016-03-07 05:57:14 Harry

Один Обходной использовать временную переменную:

.foo { 
    @workAround: 0 0, 0 100%, 100% 0; 
    .clip-path(polygon, @workAround); 
}

Вы также можете избежать значения, когда вы передаете переменную в Mixin:

.foo { 
    .clip-path(polygon, ~"0 0, 0 100%, 100% 0"); 
}

Эти и убедитесь, что значение, переданное в mixin, является строкой.

источник

2016-03-07 05:56:38

Как передать параметры с запятыми в Менее

ответ

Смежные вопросы