@bybelov
front-end разработчик

Как исправить не правильное отображение box-shadow при использовании gulp-less?

ОС: windows 7
Используется LESS 2.5.1

Есть Бутстраповский mixin
.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}


Используется в .less файле:
.box-shadow(0 0 15px rgba(0, 0, 0, 0.2));
После компиляции less на выходе получается:
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: '' 0 0 15px rgba(0, 0, 0, 0.2) 0 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: '' 0 0 15px rgba(0, 0, 0, 0.2) 0 0 rgba(0, 0, 0, 0.2);
  -o-box-shadow: '' 0 0 15px rgba(0, 0, 0, 0.2) 0 0 rgba(0, 0, 0, 0.2);
  box-shadow: '' 0 0 15px rgba(0, 0, 0, 0.2) 0 0 rgba(0, 0, 0, 0.2);


Кусочек таска:
gulp.task('style:build', function (){
	gulp.src(path.src.dirstyle + 'style.less')
		.pipe(plumber())
		.pipe(less())
		.pipe(gulp.dest(path.build.css));
});

Используются последние версии npm пакетов.

Есть предложения что это может быть?

update 2

Получается, что все миксины из файла mixins/vendor-prefixes.less (bootstrap 3.3.5)
компилируются не корректно:
.transition(all 0.35s ease-out 0s);
тоже преобразуется в
-o-transition: all 0.35s ease-out 0s;
  transition: all 0.35s ease-out 0s;
  -webkit-transition: all all 0.35s ease-out 0s ease;
  -moz-transition: all all 0.35s ease-out 0s ease;
  -ms-transition: all all 0.35s ease-out 0s ease;
  -o-transition: all all 0.35s ease-out 0s ease;
  transition: all all 0.35s ease-out 0s ease;
  • Вопрос задан
  • 203 просмотра
Решения вопроса 1
@bybelov Автор вопроса
front-end разработчик
update

Проблема локализована.
Виной стал mixin от FlexSlider-а
//
// Box-shadow
//

.box-shadow( @x-axis: @default-box-shadow-x-axis, @y-axis: @default-box-shadow-y-axis, @blur: @default-box-shadow-blur, @color: @default-box-shadow-color, @inset: @default-box-shadow-inset ) {
  
  -webkit-box-shadow: @inset @x-axis @y-axis @blur @color;
     -moz-box-shadow: @inset @x-axis @y-axis @blur @color;
       -o-box-shadow: @inset @x-axis @y-axis @blur @color;
          box-shadow: @inset @x-axis @y-axis @blur @color;

}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы