Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

-webkit-box-orient: vertical; in sass is not compiled in gulp

Tags:

css

sass

gulp

In sass file

h3 {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                line-height: 24px; 
                max-height: 24px;
                -webkit-line-clamp: 1; 
                -webkit-box-orient: vertical;
            }

After running gulp task, getting in css as

 .article-list.search .article-listings__item h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-height: 24px;
  max-height: 24px;
  -webkit-line-clamp: 1;
}

The style -webkit-box-orient: vertical; is missing in css file.

My gulp task for sass compilation is

gulp.task('styles', function() {
  return sass('src/assets/stylesheets/index.scss', { style: 'expanded' })
    .pipe(autoprefixer('last 2 version'))
    .pipe(gulp.dest('dist/styles'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/styles'))
    .pipe(notify({ message: 'Styles task complete' }));
});
like image 402
Shahina KP Avatar asked Mar 23 '17 04:03

Shahina KP


1 Answers

Add this line of code and it will work fine:

/* autoprefixer: off */

-webkit-box-orient: vertical;

/* autoprefixer: on */
like image 118
R V Niranjan Avatar answered Oct 10 '22 08:10

R V Niranjan