PostCSS로 CSS의 미래를 경험해보세요 - JS - Republic's Blog

PostCSS가 무엇인지 설명하기 전에 먼저 PostCSS가 아닌 것을 이해해 보겠습니다.

본질적으로 사람들은 PostCSS에 대해 처음 들었을 때 이를 SASS, LESS 및 Stylus와 유사한 새로운 CSS 전처리기로 생각하는 경향이 있습니다.

전처리기로 사용하려는 경우 전처리기처럼 작동합니다. 동시에 후처리기, 최적화 도구, 향후 구문과 호환되는 플러그인 등 원하는 모든 기능을 갖추고 있습니다.

PostCSS의 주요 목적은 사용자의 요구 사항을 충족하기 위해 다양한 도구를 사용할 수 있도록 하는 것입니다.

따라서 PostCSS를 빌드 도구로 생각해야 합니다. 이를 통해 다양한 JavaScript 플러그인을 사용하여 CSS를 유지할 수 있습니다. 이러한 플러그인은 여기

postcss.parts에서 찾을 수 있습니다. 플러그인이 너무 많기 때문에 이 기사를 통해 가장 일반적으로 사용되며 강력한 플러그인을 검토해 보겠습니다.

동시에 Gulp를 사용하여 CSS 파일을 처리하는 단일 작업을 만드는 방법도 배우게 됩니다.

자동 접두어

이전에 전처리기를 사용해 본 적이 있다면 접두사를 작성할 필요가 없다는 것이 얼마나 즐거운지 경험하게 될 것입니다.

​예를 들어

:-webkit-full-screen a {
 display: -webkit-box;
 display: flex
}
:-moz-full-screen a {
 display: flex
}
:-ms-fullscreen a {
 display: -ms-flexbox;
 display: flex
}
:fullscreen a {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex
}

이렇게 쓰지 않아도 됩니다. 그냥

아아아

직접 사용해 보고 싶다면 http://autoprefixer.github.io

대화형 데모를 사용하세요. 문서는 여기를 클릭하세요: github.com/postcss/autoprefixer

　PreCSS

PostCSS는 SASS와 같은 전처리기가 아니지만 일부 플러그인을 통해 Sass와 유사한 형식의 파일을 처리할 수 있습니다.

선호되는 플러그인은 PreCSS로, 이는 다수의 PostCSS 플러그인을 통합하여 Sass 구문 스타일을 작성할 수 있게 해줍니다.

자세한 내용은 설명서를 읽어보고 대화형 데모를 통해 가능성을 테스트해 보시기 바랍니다.

CSS다음

차세대 CSS인 CSS4는 CSS 작성 방식과 선택기 사용 방식을 바꿀 것을 약속합니다.

안타깝게도 이 버전의 사양은 아직 개발 중이며 출시 날짜는 아직 발표되지 않았습니다.

다행히 차세대 CSS의 일부 기능을 활용하고 싶다면 CssNext라는 플러그인이 도움이 될 수 있습니다.

CSSNext의 공식 웹사이트에는 지원되는 모든 기능이 나열되어 있습니다: cssnext.io/features/

여기에서 플레이할 수도 있습니다: cssnext.io/playground/

Css나노

마지막으로 최적화에 관한 것입니다. CssNano는 다양한 모듈을 사용하여 CSS 코드를 압축하고 최적화할 수 있습니다.

일반적인 Z-색인을 망칠 수 있으므로 Z-색인을 비활성화하는 것이 좋습니다.

다음 최적화 목록을 검토할 수 있습니다: cssnano.co/optimisations/ Gitter에서 CssNano 작성자와 채팅할 수도 있습니다: gitter.im/ben-eb/cssnano

이제 Gulp에서 이러한 플러그인을 사용하는 방법을 살펴보겠습니다.

​Gulp x PostCSS

꿀꺽

먼저 Gulp, Gulp Load Plugins 및 Gulp PostCSS를 개발 종속성으로 설치합니다. 콘솔에서 다음 명령을 실행하세요:

:fullscreen a {
 display: flex
}

Gulp를 사용해야 하는 곳에 gulpfile.js를 만들고 다음 코드를 추가하세요.

아아아아

Gulp Load PLugins 코드를 추가하세요:

npm i -D gulp gulp-load-plugins gulp-postcss

Gulp Load Plugins 종속성은 $를 통해 필요한 플러그인을 호출합니다.

포스트CSS

다음으로, dev dependency

var gulp = require('gulp'),

와 동일한 방식으로 필수 PostCSS 플러그인을 설치해야 합니다. 설치 후 gulpfile.js

$ = require('gulp-load-plugins')();

에 추가하세요. 다음으로, Gulp CSS 작업 작성을 시작하세요

npm i -D autoprefixer cssnano cssnext precss

이 작업에서는 먼저 변수를 사용하여 사용할 PostCSS 플러그인을 저장합니다.

// PostCSS Plugins
var autoprefixer = require('autoprefixer'),
cssnext = require('cssnext'),
precss = require('precss'),
cssnano = require('cssnano');

CssNano의 zindex:false를 설정하면 z-index가 재설정되는 것을 방지할 수 있습니다.

CSS 파일을 처리하려면 다음 파일을 검색해야 합니다:

// Gulp task to process CSS with PostCSS plugins 
gulp.task('css', function() {

 });

그런 다음 프로세서 변수의 PostCSS 플러그인을 통해 CSS 파일을 처리합니다.

파이프 방식을 이용하여 가공을 직렬로 연결

var processors = [autoprefixer, cssnext, precss, cssnano({zindex: false})];

처리된 파일

return gulp.src('./source/css/style.css')

를 출력하려면 다음 코드를 사용하세요. 위의 모든 것은 CSS를 처리하기 위해 PostCSS 플러그인을 사용할 때 수행해야 하는 작업입니다.

아아아아

Tuts+에 대한 완전하고 상세한 가이드가 있습니다. 꼭 읽어보시길 적극 권장합니다: webdesign.tutsplus.com/series/postcss-deep-pe–cms-889

또한 이러한 PostCSS 플러그인을 사용하여 빠른 시작에 도움이 되는 상용구 템플릿을 만들었습니다. /github.com/PierrickGT/PCGB

blog.js-republic.com/jump-into-the-future-of-css-with-postcss/

위 내용은 PostCSS로 CSS의 미래를 경험해보세요 - JS - Republic's Blog의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!