I
I
Igor2015-09-19 15:23:00
css
Igor, 2015-09-19 15:23:00

How to fix incorrect box-shadow rendering when using gulp-less?

OS: windows 7
Uses LESS 2.5.1
Has Bootstrap mixin

.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

Used in a .less file:
.box-shadow(0 0 15px rgba(0, 0, 0, 0.2));
After compiling less, the output is:
-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);

A piece of task:
gulp.task('style:build', function (){
  gulp.src(path.src.dirstyle + 'style.less')
    .pipe(plumber())
    .pipe(less())
    .pipe(gulp.dest(path.build.css));
});

The latest versions of npm packages are used.
Any suggestions what it could be?
update 2
It turns out that all mixins from the mixins/vendor-prefixes.less file (bootstrap 3.3.5)
are not compiled correctly:
.transition(all 0.35s ease-out 0s);
it is also converted to
-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;

Answer the question

In order to leave comments, you need to log in

1 answer(s)
I
Igor, 2015-09-19
@bybelov

update
The problem is localized.
The fault was the mixin from 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;

}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question