PostCSS: Sass의 새로운 플레이 날짜

최근 PostCSS는 웹 개발의 프론트 엔드 측면에서 라운드를 만드는 도구입니다.

PostCSS는 Autoprefixer의 창시자인 Andrey Sitnik에 의해 개발되었습니다. JavaScript를 사용하여 모든 CSS를 변환하는 도구로 개발된 Node.js 패키지이므로 다른 프로세서보다 빌드 시간이 훨씬 빠릅니다.

이름이 암시하는 것처럼 보이지만 포스트 프로세서(또는 프리 프로세서도 아님)가 아니라 PostCSS 관련(또는 더 정확하게는 PostCSS 플러그인 관련) 구문을 변환하는 변환기입니다. 바닐라 CSS.

그렇다고 해서 PostCSS와 다른 CSS 프로세서가 함께 작동할 수 없다는 의미는 아닙니다. 사실, CSS 전/후처리의 세계를 처음 접하는 경우 Sass와 함께 PostCSS를 사용하면 많은 골칫거리를 줄일 수 있습니다. 이에 대해서는 곧 다루게 될 것입니다.

PostCSS는 다른 CSS 프로세서를 대체하지 않습니다. 오히려 필요할 때 유용할 수 있는 또 다른 도구로, 도구 세트에 또 다른 추가 기능으로 생각하십시오.

PostCSS의 사용은 최근 기하급수적으로 증가하기 시작했으며 오늘날 Twitter, JetBrains 및 Wikipedia와 같은 가장 큰 기술 산업 비즈니스에서 사용하고 있습니다. 널리 채택되고 성공할 수 있었던 것은 주로 모듈화 때문입니다.

플러그인, 플러그인, 플러그인

PostCSS는 플러그인에 관한 모든 것입니다.

이를 통해 사용할 플러그인을 선택하고 불필요한 종속성을 제거하고 다른 전처리기의 기본 특성과 함께 작업할 빠르고 가벼운 설정을 모두 제공할 수 있습니다. 또한 효율성을 유지하면서 워크플로에 대해 더 많이 사용자 정의된 구조를 만들 수 있습니다.

이 게시물 작성일 현재 PostCSS에는 200개 이상의 플러그인 저장소가 있으며 각각 다른 작업을 담당합니다. PostCSS의 GitHub 리포지토리에서 플러그인은 "글로벌 CSS 문제 해결", "오늘 미래의 CSS 사용", "CSS 가독성 향상", "이미지 및 글꼴", "Linters" 및 "기타"로 분류됩니다.

그러나 플러그인 디렉토리에서 더 정확한 분류를 찾을 수 있습니다. 나는 당신이 그들 중 몇 가지의 능력에 대한 더 나은 아이디어를 얻기 위해 직접 그곳을 살펴보기를 권합니다. 그것들은 상당히 광범위하고 인상적입니다.

가장 인기 있는 PostCSS 플러그인인 Autoprefixer에 대해 들어보셨을 것입니다. Autoprefixer는 인기 있는 독립 실행형 라이브러리입니다. 두 번째로 인기 있는 플러그인은 CSSNext로, 예를 들어 브라우저 지원에 대한 걱정 없이 CSS의 새로운 사용자 정의 속성과 같은 최신 CSS 구문을 오늘날 사용할 수 있게 해주는 플러그인입니다.

모든 PostCSS 플러그인이 그렇게 획기적인 것은 아닙니다. 일부는 단순히 다른 프로세서와 함께 기본적으로 제공되는 기능을 제공합니다. 예를 들어 parent selector 를 사용합니다. Sass를 사용하면 Sass를 설치하는 즉시 사용을 시작할 수 있습니다. PostCSS에서는 postcss-nested-ancestors 플러그인을 사용해야 합니다. extends 또는 mixins 인에도 동일하게 적용될 수 있습니다.

그렇다면 PostCSS와 플러그인을 사용하면 어떤 이점이 있습니까? 대답은 간단합니다. 자신만의 전투를 선택할 수 있습니다. Sass의 유일한 부분이 parent selector 라고 생각되면 CSS를 컴파일하기 위해 환경에 Sass 라이브러리 설치와 같은 것을 구현하는 스트레스를 줄이고 다음을 사용하여 프로세스 속도를 높일 수 있습니다. PostCSS 및 postcss-nested-ancestors 플러그인만 가능합니다.

이것은 PostCSS의 사용 사례 중 하나일 뿐이지만 직접 확인하기 시작하면 의심할 여지 없이 다른 많은 사용 사례를 깨닫게 될 것입니다.

기본 PostCSS 사용법

먼저 몇 가지 PostCSS 기본 사항을 다루고 일반적으로 어떻게 사용되는지 살펴보겠습니다. PostCSS는 Gulp 또는 Grunt와 같은 작업 실행기와 함께 사용할 때 매우 강력하지만 postcss-cli를 사용하여 명령줄에서 직접 사용할 수도 있습니다.

간단한 사용 사례를 살펴보겠습니다. 모든 RGBA 형식 색상에 대체 HEX 값을 추가하기 위해 postcss-color-rgba-fallback 플러그인을 사용한다고 가정합니다.

NPM이 postcss , postcss-cli 및 postcss-color-rgba-fallback 을 설치했으면 다음 명령을 실행해야 합니다.

 postcss --use postcss-color-rgba-fallback -o src/css/all.css dist/css/all.css

이 명령을 통해 PostCSS에 postcss-color-rgba-fallback 플러그인을 사용하고 src/css/all.css 내부에 있는 CSS를 처리하고 dist/css/all.css 로 출력하도록 지시합니다.

알겠습니다. 쉬웠습니다. 이제 좀 더 복잡한 예를 살펴보겠습니다.

Task-runner 및 Sass와 함께 PostCSS 사용하기

PostCSS는 워크플로에 쉽게 통합할 수 있습니다. 이미 언급했듯이 Grunt, Gulp 또는 Webpack과 같은 작업 실행기와 완벽하게 통합되며 NPM 스크립트와 함께 사용할 수도 있습니다. Sass 및 Gulp와 함께 PostCSS를 사용하는 예는 다음 코드 스니펫만큼 간단합니다.

 var gulp = require('gulp'), concatcss = require('gulp-concat-css'), sass = require('gulp-sass'), postcss = require('gulp-postcss'), cssnext = require('postcss-cssnext'); gulp.task('stylesheets', function () { return ( gulp.src('./src/css/**/*.scss') .pipe(sass.sync().on('error', sass.logError)) .pipe(concatcss('all.css')) .pipe(postcss([ cssNext() ])) .pipe(gulp.dest('./dist/css')) ) });

위의 코드 예제를 분해해 봅시다.

일련의 변수에 필요한 모든 모듈(Gulp, Contact CSS, Sass, PostCSS 및 CSSNext)에 대한 참조를 저장합니다.

그런 다음 stylesheets 라는 새 Gulp 작업을 등록합니다. 이 작업은 확장자가 .scss 인 ./src/css/ 에 있는 파일을 감시하고(하위 디렉토리 구조의 깊이에 관계없이) Sass는 파일을 컴파일하고 모든 파일을 단일 all.css 파일로 연결합니다.

all.css 파일이 생성되면 PostCSS로 전달되어 모든 PostCSS(및 플러그인) 관련 코드를 실제 CSS로 변환하고 결과 파일은 ./dist/css 에 배치됩니다.

좋습니다. 태스크 러너와 전처리기로 PostCSS를 설정하는 것은 훌륭하지만 처음부터 PostCSS로 작업하는 것을 정당화하기에 충분합니까?

Sass는 안정적이고 성숙하며 그 뒤에 거대한 커뮤니티가 있지만 예를 들어 Autoprefixer와 같은 플러그인에 PostCSS를 사용하고 싶을 수 있습니다. 예, 독립형 Autoprefixer 라이브러리를 사용할 수 있지만 Autoprefixer를 PostCSS 플러그인으로 사용하는 이점은 나중에 워크플로에 더 많은 플러그인을 추가하고 JavaScript 라이브러리의 보트로드에 대한 불필요한 종속성을 피할 수 있다는 것입니다.

이 접근 방식을 통해 접두사가 없는 속성을 사용하고 Can I Use에서와 같이 API에서 가져온 값을 기반으로 접두사를 붙일 수 있습니다. 이는 Sass만으로는 거의 달성할 수 없는 것입니다. 이것은 코드 접두사를 지정하는 가장 좋은 방법이 아닐 수 있는 복잡한 믹스 인을 피하려는 경우에 매우 유용합니다.

PostCSS를 현재 워크플로에 통합하는 가장 일반적인 방법은 이미 Sass를 사용하고 있는 경우 PostCSS 및 해당 플러그인을 통해 .sass 또는 .scss 파일의 컴파일된 출력을 전달하는 것입니다. 그러면 Sass와 PostCSS의 출력이 모두 있는 다른 CSS 파일이 생성됩니다.

작업 실행기를 사용하는 경우 PostCSS를 사용하는 것은 .sass 또는 .scss 파일(또는 선택한 전처리기의 파일)을 컴파일한 직후 현재 작업 파이프라인에 추가하는 것만큼 쉽습니다.

PostCSS는 다른 사람들과 잘 어울리며 개발자로서 매일 경험하는 몇 가지 주요 문제점을 완화할 수 있습니다.

PostCSS(그리고 CSSNext 및 Autoprefixer와 같은 몇 가지 플러그인)와 Sass가 함께 작동하는 또 다른 예를 살펴보겠습니다. 다음 코드를 가질 수 있습니다.

 :root { $sass-variable: #000; --custom-property: #fff; } body { background: $sass-variable; color: var(--custom-property); &:hover { transform: scale(.75); } }

이 코드 조각에는 바닐라 CSS와 Sass 구문이 있습니다. 사용자 정의 속성은 이 기사를 작성하는 날짜를 기준으로 여전히 CR(후보 권장 사항) 상태이며 여기에서 PostCSS용 CSSNext 플러그인이 작동합니다.

이 플러그인은 사용자 정의 속성과 같은 것들을 오늘날의 CSS로 바꾸는 역할을 할 것입니다. Autoprefixer 플러그인에 의해 자동 접두사가 붙을 transform 속성에도 비슷한 일이 일어날 것입니다. 이전에 작성한 코드는 다음과 같은 결과를 낳습니다.

 body { background: #000; color: #fff; } body:hover { -webkit-transform: scale(.75); transform: scale(.75); }

PostCSS용 플러그인 저작

앞서 언급했듯이 PostCSS의 매력적인 기능은 사용자 정의 수준입니다. 개방성 덕분에 특정 요구 사항을 충족하기 위해 PostCSS용 사용자 정의 플러그인을 작성하는 것은 JavaScript 작성에 익숙하다면 다소 간단한 작업입니다.

PostCSS의 사람들은 시작할 수 있는 꽤 견고한 목록을 가지고 있으며 플러그인 개발에 관심이 있다면 추천 기사와 가이드를 확인하십시오. 질문이나 토론이 필요하다고 생각되면 Gitter가 가장 좋은 출발점입니다.

PostCSS에는 Twitter에서 꽤 활발한 팔로어 기반을 가진 API가 있습니다. 이 게시물의 앞부분에서 언급한 다른 커뮤니티 특전과 함께 이것이 플러그인 생성 프로세스를 매우 재미있고 협업 활동으로 만드는 이유입니다.

따라서 PostCSS 플러그인을 생성하려면 Node.js 모듈을 생성해야 합니다. (일반적으로 node_modules/ 디렉토리의 PostCSS 플러그인 폴더 앞에는 "postcss-"와 같은 접두사가 붙습니다. 이는 PostCSS에 의존하는 모듈임을 명시하기 위함입니다.)

우선, 새 플러그인 모듈의 index.js 파일에 플러그인 처리 코드의 래퍼가 될 다음 코드를 포함해야 합니다.

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { // Rest of code } });

플러그인 이름을 replacecolors 로 지정했습니다. 플러그인은 deepBlackText 키워드를 찾아 #2e2e2e HEX 색상 값으로 바꿉니다.

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { css.walkRules(function(rule) { rule.walkDecls(function(decl, i) { var declaration = decl.value; if (declaration.indexOf('deepBlackText') !== -1) { declaration = 'color: #2e2e2e;'; } }); }); } });

이전 스니펫은 다음을 수행했습니다.

1. walkRules() 를 사용하여 현재 진행 중인 .css 파일에 있는 모든 CSS 규칙을 반복합니다.
2. walkDecls() 를 사용하여 현재 .css 파일 내부에 있는 모든 CSS 선언을 반복합니다.
3. 그런 다음 선언 변수 내부에 선언을 저장하고 문자열 deepBlackText 가 포함되어 있는지 확인했습니다. 그렇다면 다음 CSS 선언에 대한 전체 선언을 대체했습니다. color: #2e2e2e; .

플러그인이 준비되면 명령줄에서 직접 다음과 같이 사용할 수 있습니다.

 postcss --use postcss-replacecolors -o src/css/all.css dist/css/all.css

또는 예를 들어 다음과 같이 Guplfile 에 로드됩니다.

 var replacecolors = require('postcss-replacecolors');

PostCSS를 사용하려면 현재 CSS 프로세서를 버려야 하나요?

글쎄, 그것은 당신이 찾고있는 것에 달려 있습니다.

Sass와 PostCSS가 동시에 사용되는 것을 보는 것이 일반적입니다. 신규 사용자가 PostCSS 플러그인의 기능과 함께 사전/후처리 프로세서가 즉시 제공하는 일부 도구를 사용하는 것이 더 쉽기 때문입니다. 이들을 나란히 사용하면 현재 프로세서 종속 구현(예: Sass mixins , extends , 상위 선택기 , 자리 표시자 선택기 , 등등).

PostCSS에 기회를 주십시오

PostCSS는 프론트 엔드 개발 세계에서 뜨거운 (글쎄, 일종의) 새로운 것입니다. 전/후처리 자체가 아니며 삽입되는 환경에 적응할 수 있을 정도로 유연하기 때문에 널리 채택되었습니다.

PostCSS의 대부분의 기능은 플러그인에 있습니다. 당신이 찾고 있는 것이 모듈성, 유연성 및 다양성이라면 이것이 작업에 적합한 도구입니다.

작업 실행기 또는 번들러를 사용하는 경우 현재 흐름에 PostCSS를 추가하는 것은 거의 케이크 조각일 것입니다. 설치 및 사용 가이드를 확인하면 이미 사용 중인 도구와 쉽게 통합할 수 있는 방법을 찾을 수 있습니다.

많은 개발자들은 적어도 가까운 미래 동안은 유지될 것이라고 말합니다. PostCSS는 우리가 현재 CSS를 구성하는 방식에 큰 영향을 미칠 수 있으며, 이는 잠재적으로 프론트 엔드 웹 개발 커뮤니티 전반에 걸쳐 표준을 훨씬 더 많이 채택하도록 이끌 수 있습니다.