Генерация префиксов поставщиков в LESS

Я собрал воедино этот подход для создания свойств и анимации с префиксом поставщика с использованием LESS. Сначала некоторые заводские функции:

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

.keyframes(@name; @animation) {
    @animation();
    @-webkit-keyframes @name { .frames(-webkit-) }
    @-moz-keyframes @name { .frames(-moz-) }
    @-o-keyframes @name { .frames(-o-) }
    @keyframes @name { .frames(~'') }
}

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

.element {
    .vendorprefix(animation; slideout 1s);
}

Функция «.keyframes» имеет миксин «.frames» в качестве одного из своих аргументов, который она использует для генерации ключевых кадров с префиксом поставщика. Он также передает аргумент «@vendor» миксину «.frames», чтобы вы могли добавлять свойства, специфичные для поставщика. например:

.keyframes (slideout; {
    .frames(@vendor) {
        0% {
            @{vendor}transform: translate(0px, 0px);
        }
        100% {
            @{vendor}transform: translate(100px, 0px);
        }
    }
});

Это работает, но есть ли у кого-нибудь лучший метод?


css less prefix vendor
person Community    schedule 02.04.2015    source источник

Ответы (1)


arrow_upward
-1
arrow_downward

Вы можете реализовать префиксы поставщиков в LESS, но уже существуют гораздо лучшие инструменты.

Попробуйте использовать css-постпроцессор, такой как Myth, он имеет функцию автоматического префикса.

person rtf_leg    schedule 02.04.2015