꿀꺽 꿀꺽 postcss rem to pixel fall back

잼 작업을 자동으로 처리하고 픽셀 대체를 추가하려고합니다. 여기 내 gulfile.js입니다 : 작업이 지금 실행하고 픽셀에 REMS 변환됩니다꿀꺽 꿀꺽 postcss rem to pixel fall back

// NPM install gulp gulp-less gulp-watch gulp-plumber gulp-livereload gulp-postcss autoprefixer-core css-mqpacker csswring --save-dev 
// explanation task breakdown: http://stackoverflow.com/questions/23953779/gulp-watch-and-compile-less-files-with-import 
var gulp = require('gulp'); 
var less = require('gulp-less'); 
var watch = require('gulp-watch'); 
var plumber = require('gulp-plumber'); 
var livereload = require('gulp-livereload'); 
var path = require('path'); 
var postcss = require('gulp-postcss'); 
var autoprefixer = require('autoprefixer-core'); 
var mqpacker = require('css-mqpacker'); 
var csswring = require('csswring'); 
var pixrem = require('gulp-pixrem'); 

gulp.task('less', function() { 
    var processors = [ 
    autoprefixer({browsers: ["last 8 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}), 
    mqpacker, 
    csswring({ 
     preserveHacks: true, 
     removeAllComments: true 
    }) 
    ]; 
    gulp.src('./style.less') // only compile the entry file 
    .pipe(plumber()) 
    .pipe(less({ 
    paths: ['./','./vendors/', './layouts', './partials/', './overrides/'] 
    })) 
    .pipe(pixrem('10px')) 
    .pipe(postcss(processors)) 
    .pipe(plumber.stop()) 
    .pipe(gulp.dest('./')) 
    .pipe(livereload()); 
}); 
gulp.task('watch', function() { 
    gulp.watch('./**/*.less', ['less']); // Watch all the .less files, then run the less task 
}); 

gulp.task('default', ['watch']); // Default will run the 'entry' watch task

gulp-pixrem 덕분에 폴백 (fallback). 내가 사용할 수없는 것은 기본 루트 값을 전환하는 것입니다. .pipe(pixrem('10px')) 또는 .pipe(pixrem({rootvalue: '10px'})은 기본 단위 변환을 변경하지 않습니다.

.pipe(pixrem({ rootvalue: '10px' })) 실제로

나를 신경 쓰지 마 오류 TypeError in plugin gulp-pixrem Cannot read property '1' of null

편집으로 돌아갑니다.

.pipe(pixrem(100%)) 잘 작동합니다.

최종 편집

출처

2014-10-31 Yannick Schall

이 원래의 질문으로부터 접선에 안하지만 IMO이 당신을 위해 taskrunner를 사용해야하는 것이 아닙니다 잘 작동한다. 당신은 완전히 할 수 있지만 SASS 이하를 사용합니까? 왜 당신을 위해 그것을 할 [mixin] (http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/)을 사용하지 않습니까? – aug

더 나은 워크 플로우를 만들 수 있는지를 테스트하고 있습니다. 나는 Sass와 함께하는 것이 더 낫다는 것에 동의한다. CSS 속성 값을 변환하는 함수를 작성하는 것은 쉽습니다. 내가 이해하는 바에 따르면 Less를 사용하면 속성 (일명 글꼴 크기 등)에 바인딩해야합니다. 작업량이 적은 곳에서 작업해야하며 작업의 일부는 선행 처리기로 구축되지 않은 사이트를 업데이트하는 것입니다. 나는 또한 이런 종류의 것들에 대해서 mixins가 아닌 CSS를 작성하는 것을 매우 자유롭게 찾는다. –

아, 그건 완전히 이해가됩니다. 어느 쪽이든 공유를위한 감사합니다 :) – aug

.pipe (pixrem (100 %))

출처

2014-10-31 19:41:44

꿀꺽 꿀꺽 postcss rem to pixel fall back

답변

관련 문제