Есть ли для PhpStorm, что-то вроде плагина Autoprefixer (для css)?

Question

[Александр]

Смысл прост, пишем:

a {
    transition: transform 1s
}

плагин сам добавляет:

a {
  -webkit-transition: -webkit-transform 1s;
  -o-transition: -o-transform 1s;
  transition: -ms-transform 1s;
  transition: transform 1s
}

Answer 1

[Андрей Ситник]

Как автора Автопрефиксера могу прямо сказать — его нельзя использовать в текстовых редакторах. Он должен работать в Gulp, webpack или другой системе сборки.

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

В общем, изучите Gulp — так вы потратите несколько вечеров, зато потом быстро наверстаете за счёт большей автоматизации.

Comments

[Златослав Десятников]

Но ведь есть Автопрефиксер для Atom.
https://atom.io/packages/autoprefixer

Бывают моменты, когда ради префиксов накатывать галп не очень удобно, в чужом уже работающем проекте, от которого не осталось исходников.

Answer 2

[Андрей Александрович]

Используйте препроцессор для CSS (LESS || SCSS || SASS). В них можете использовать миксины. К тому же препроцессоры значительно упрощают жизнь и повышают производительность)

Я привык работать с LESS и в каждом проекте есть файл elements.less с набором миксинов:

.box-shadow(@arguments) {
  -webkit-box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  box-shadow: @arguments;
}
.rotation(@deg:5deg){
  .transform(rotate(@deg));
}

В коде просто использую потом, например:
.box-shadow(0 0 10px rgba(0,0,0, .5));
или
.box-shadow(0 0 10px fade(#000, 5%));

Answer 3

[Сергей Протько]

в PhpStorm есть ватчеры если хотите. Но в целом лучше было бы воспользоваться gulp-ом каким - помимо autoprefixer получили бы еще и less/sass/etc без которых сейчас сложно живется (да и зачем?), сорсмэпы и оптимизаторы и т.д.