PostCS를 사용하여 자신의 CSS 전 처리기를 구축하는 방법

키 포인트

postcss를 통해 개발자는 자체 CSS 전 처리기를 구축 할 수 있으므로 SASS, LESS 또는 Stylus와 같은 다른 사전 처리기에 대한 유연성과 제어력이 향상됩니다. JavaScript 플러그인을 사용하여 스타일을 조작하고 변수, Mixins 및 Nesting과 같은 사전 처리기와 같은 기능을 추가 할 수 있습니다. PostCS의 장점에는 모듈 식, 경량 빌드, 새로운 기능의 즉각적인 구현 및 개발 전략을 시행하는 능력이 포함됩니다. 전통적인 사전 처리기보다 빠릅니다. 그러나 빌드 프로세스의 복잡성 증가, 다른 구문 및 효과적인 CSS에 대한 요구 사항과 같은 몇 가지 단점도 있습니다.

Postcss는 큰 잠재력을 가지고 있지만 모든 프로젝트에 적합하지는 않습니다. 작고 간단한 프로젝트 나 단일 팀에게 매력적인 옵션이 될 수 있습니다. 그러나 대규모 팀이나 프로젝트의 경우 Sass의 광범위한 이해와 사용으로 인해 기존 전처리가 여전히 첫 번째 선택 일 수 있습니다.

• 많은 개발자들이 현재 덜 스타일러스 또는 가장 인기있는 Sass를 채택했습니다. 이상적으로는 AutoPrefixer를 사용하여 CSS를 후 처리하여 Mixin 또는 Compass와 같은 프레임 워크를 사용하지 않고 필요할 때 공급 업체 접두사를 추가해야합니다. AutoPrefixer는 CSS를 스타일을 조작하는 데 사용할 수있는 객체 모델로 변환하는 도구입니다. 변수, 믹스 인 및 중첩과 같은 전처리기와 같은 기능을 구현하는 다른 많은 플러그인이 있습니다. Ben Frain의 최근 기사 "Sass : Not You, It 's Me"는 흥미로운 제안을 제시합니다. PostCS를 사용하여 원하는 CSS 전 처리기를 만들 수 있다는 점을 감안할 때 실제로 Sass, Less 또는 Stylus가 필요합니까? 빌드 프로세스 중에 기본 Sass와 같은 파서를 만들 수 있습니다. 이 예에서는 gulp.js 작업 파일을 사용하겠습니다. 그러나 동일한 개념이 Grunt 또는 기타 빌드 시스템에 적용됩니다. 먼저 NPM을 사용하여 PostCS 및 필요한 플러그인을 설치합니다.
그런 다음 GulpFile.js에서 CSS 처리 함수 배열을 만듭니다.
• 및 CSS 처리 작업을 작성하십시오.
PostCSS API를 사용하여 고유 한 처리 기능을 만들 수도 있습니다. 예를 들어, 우리는 모든 글꼴 가족 선언에 Sans-Serif 폴백을 적용 할 수 있습니다.
• > 파일 /source/css/styles.css에 다음 코드가 포함되어있는 경우

Gulp CSS Running Gulp CSS는 /dest/css/styles.css : 에서이 CSS를 생성합니다.

장점

npm install gulp-postcss postcss-mixins postcss-simple-vars postcss-nested autoprefixer-core --save-dev

postcss를 사용하면 전처리 제자가 부과 한 제한과 선택을 제거 할 수 있습니다. 이 방법은 몇 가지 이점을 제공합니다

모듈 식
• 프로젝트에 필요한 플러그인과 기능을 추가하면됩니다. 경량
전처리 기는 점점 더 크고 복잡 해지고 있습니다. 모든 기능을 원하거나 사용하지는 않지만 여전히 존재합니다. Postcss는 부피를 줄입니다.
• 즉석 구현 Sass, Libsass, Less, Stylus 또는 기타 사전 처리기에서 특정 기능을 사용할 수 있기를 기다린 적이 있습니까? 당신은 지금 사용할 수 있습니다 ... javaScript 함수 CSS 전 처리기는 JavaScript를 사용합니다. 대부분의 사전 처리기 언어 구조는 기본입니다. 당신은 종종 그들이 만든 원래 CS보다 더 복잡하고 이해하기 어려운 기능과 Mixin을 볼 수 있습니다. PostCS를 사용하면 파일을 쉽게 열고, 데이터베이스에서 읽거나, HTTP 요청을 발행하거나, 복잡한 계산을 수행 할 수 있습니다.
개발 전략 시행
• 팀이 @extend 문을 사용하지 않기를 원한다고 가정하십시오. 확장 플러그인을 빌드 프로세스에 추가하지 않으면 @extend는 누구에게도 사용할 수 없습니다. 이것은 즉시 분명 할 것입니다. 매우 빠릅니다. 매우 빠릅니다. 매우 빠릅니다. 저자는 PostCSS가 동등한 전처리기보다 4-40 배 빠른 것으로 추정합니다. 몇 가지 플러그인 만 필요하면 이점이 더 높아질 것이라고 생각합니다. 전체 솔루션은 JavaScript로 내장되어 있으며 다른 라이브러리 또는 언어 통역사로 점프 할 필요가 없습니다.
• 단점 그래서 모든 것이 정상입니까? 불행히도, Postcss는 완벽한 해결책이 아닙니다 :
복잡성 증가
• 빌드 프로세스는 관리하기가 더 어려워 질 것입니다. SASS를 추가하는 것은 일반적으로 코드의 한 줄 또는 두 줄이지만 PostCS는 더 많은 계획이 필요합니다. 특히 플러그인이 특정 순서로 호출되어야하므로 더 많은 계획이 필요합니다. 예를 들어, @import Inline은 변수를 구문 분석하기 전에 구문 분석해야합니다. 그러나 @import 선언에 변수가 포함되어 있으면 어떻게해야합니까? 경우에 따라 플러그인을 여러 번 호출해야 할 수도 있습니다. 다른 구문 나는 처음에 작은 SASS 프로젝트를 PostCS로 변환하려고 시도했습니다. 시도조차하지 마세요! 결국 성공했지만 PostCSS 플러그인은 종종 @mixin 대신 @define-mixin과 같은 약간 다른 구문을 사용합니다. 이로 인해 난독 화 및 많은 코드 업데이트가 발생할 수 있습니다. 그 이유 중 일부는 ...
입니다 postcss에는 유효한 CSS
• 대부분의 사전 처리기가 일반 텍스트 파일을 구문 분석해야하므로 구문이 이론적으로 가능합니다. Postcss는 객체 모델을 생성하므로 처음부터 구문 적으로 올바른 CS가 필요합니다. // 단일 줄 주석도 실패 할 수 있습니다. CSS 파일을 PostCS에 전달하기 전에 CSS 파일을 전처리 할 수 ​​있지만, 전처리기를 사용하는 것으로 돌아 왔습니다! 전처리기를 포기해야합니까?
단일 팀에서 비교적 간단한 독립형 프로젝트를 시작하면 사용자 정의 PostCSS 프로세서가 매력적인 옵션이 될 수 있습니다. 또한 공급 업체 접두사, 단일 선언으로 포장 미디어 쿼리, Calc () 방정식 감소, 기존 브라우저 응용 프로그램의 백업, CSS4 Selectors, Shrink 등과 같은

real 사후 처리 작업에 대한 PostCSS를 권장합니다. 이러한 작업을 직접 수행하는 데는 이점이 없습니다. 그러나 Sass는 임계 질량에 도달했습니다. 사전 처리기 구문은 완벽하지는 않지만 팀의 대부분의 개발자는 이해할 것입니다. 미묘한 차이는 모든 사람에게 상당한 혜택을 제공하거나 호소하지는 않습니다. 즉, PostCSS 및 유사한 재 작업 프레임 워크는 큰 잠재력을 가지고 있습니다. 모듈 식 CSS 플러그인 시스템이 복제 - 또는 혼합 -우리가 원하는 SASS, LESS 및 Stylus의 구문 및 기능을 복제 할 수 있다면 다른 모든 사전 처리기 중심가를 이길 수있는 사전 처리기가 있습니다. 누군가 누군가 지금이 프로젝트를 개발하고 있다고 확신 할 수 있습니다 ... PostCSS를 프로젝트의 전처리 자로 성공적으로 사용 했습니까? Sass에서 당신을 끌어들이나요? 덜 마이그레이션 하시겠습니까? 스타일러스를 포기 하시겠습니까? postcss에 대한 faqs

PostCS와 다른 CSS 전 처리기의 주요 차이점은 무엇입니까?
postcss는 JavaScript 플러그인을 사용하여 스타일을 변환하는 도구입니다. 이 플러그인은 코드 정렬, 공급 업체 접두사 추가 및 향후 CSS 기능을 활성화하는 것과 같은 다양한 작업을 수행 할 수 있습니다. SASS 이외의 다른 CSS 전 처리기와 달리 PostCS에는 구문이 내장되어 있지 않습니다. 대신 플러그인을 사용하여 CSS를 변환합니다. 따라서 프로젝트에 필요한 플러그인 만 선택할 수 있으므로보다 유연하고 사용자 정의 할 수 있습니다.

PostCS를 설치하고 사용하는 방법은 무엇입니까?

PostCSS를 설치하려면 컴퓨터에 node.js 및 npm을 설치해야합니다. 그런 다음 명령 를 사용하여 전 세계적으로 PostCS를 설치할 수 있습니다. PostCSS를 사용하려면 사용하려는 플러그인을 설치 한 다음 사용하려는 플러그인을 지정하는 구성 파일을 작성해야합니다. 그런 다음 CMSS 파일에서 COMMENT 를 사용하여 CSS 파일에서 PostCSS를 실행할 수 있습니다.

인기있는 PostCSS 플러그인은 무엇입니까?

각각 다른 목적을 가진 PostCSS 플러그인이 많이 있습니다. 일부 인기있는 플러그인에는 AutoPrefixer가 포함되어 있으며 CSSNEXT에 자동으로 공급 업체 접두사를 추가하고 CSSNANO를 사용할 수 있습니다.

다른 CSS 전 처리기와 함께 PostCS를 사용할 수 있습니까?

예, Sass 이외의 다른 CSS 전 처리기와 함께 PostCS를 사용할 수 있습니다. 이를 통해 이러한 사전 처리기의 기능을 활용하면서 PostCS의 유연성과 힘도 혜택을받을 수 있습니다.

postcss를 사용하면 어떤 이점이 있습니까?

postcss는 많은 이점을 제공합니다. 사용자 정의가 가능하므로 원하는 플러그인 만 선택할 수 있습니다. 이로 인해 더 작고 빠른 빌드 프로세스가 발생할 수 있습니다. PostCS를 사용하면 오늘날 미래의 CSS 기능을 사용할 수 있으며 CSS에 공급 업체 접두사를 자동으로 추가하여 시간을 절약하고 스타일이 다른 브라우저에서 제대로 작동하도록합니다.

postcss를 사용하는 단점은 무엇입니까?

PostCSS는 강력하고 유연하지만 학습 곡선은 다른 CSS 전 처리기보다 가파르게 될 수 있습니다. 플러그인에 의존하기 때문에 프로젝트에 적합한 플러그인을 조사하고 선택하는 데 시간을 소비해야합니다. 또한 새로운 도구이기 때문에 다른 전처리 기만큼 널리 지원되거나 채택되지 않을 수 있습니다.

Postcs는 Mixin을 어떻게 처리합니까?

postcss는 postcss-mixins 플러그인을 통해 mixin을 처리합니다. 이 플러그인을 사용하면 SASS 이하의 작업과 유사한 CSS에서 Mixins를 정의하고 사용할 수 있습니다. PostCSS 구성 파일에서 Mixin을 정의하고 키워드를 사용하여 CSS에서 사용할 수 있습니다.

기존 프로젝트에서 PostCS를 사용할 수 있습니까?

예, PostCS를 기존 프로젝트에 통합 할 수 있습니다. 사용하려는 PostCSS 및 플러그인을 설치 한 다음 PostCSS 구성 파일을 설정하면됩니다. 그런 다음 기존 CSS 파일에서 PostCS를 실행할 수 있습니다.

PostCS는 AutoPrefixer 또는 CSSNext와 같은 다른 도구와 어떻게 비교됩니까?

autoprefixer 및 cssnext는 실제로 PostCSS 플러그인입니다. 이는 PostCS 위에 실행되는 도구임을 의미하며 플러그인 아키텍처를 활용합니다. AutoPrefixer는 CSS에 공급 업체 접두사를 추가하는 반면 CSSNEXT를 사용하면 오늘날 향후 CSS 기능을 사용할 수 있습니다.

PostCS는 대규모 프로젝트에 적합합니까?

예, PostCSS는 모든 규모의 프로젝트에 적합합니다. 사용자 정의 가능이므로 원하는 플러그인 만 선택하여 더 작고 빠른 빌드 프로세스를 사용할 수 있습니다. 이것은 성능이 문제가되는 대규모 프로젝트에 적합한 선택입니다. @mixin

위 내용은 PostCS를 사용하여 자신의 CSS 전 처리기를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!