Postcs에 대한 소개

postcss : 전처리 기를 넘어서 강력한 CSS 도구 이 PostCSS 소개는 SASS 및 적은 전통적인 CSS 전 처리기에 대한 장점, 기능 기능 및 광대 한 플러그인 생태계의 기능에 대한 장점을 탐구합니다.

키 하이라이트 :

Node.js 기반 도구 인 Postcss는 플러그인을 사용하여 유효한 CSS를 향상시킵니다. CSS를 Abstract 구문 트리 (AST)로 구문 분석하여 최종 출력을 생성하기 전에 조작을 가능하게합니다. Sass, Less, Stylus와 같은 전처리기를 보완 할 수 있습니다 postcss는 표준 CSS 구문 분석, 사용자 정의 가능한 플러그인 통합, 프로젝트 별 구성 및 사용자 정의 플러그인을 만드는 기능을 포함한 이점을 제공합니다. 많은 개발자들은 이미 AutoPrefixer와 같은 플러그인을 통해 게시물을 간접적으로 사용합니다. Node.js가 필요한 PostCSS는 WebPack, Parcel 및 Gulp.js와 같은 빌드 도구와 완벽하게 통합됩니다. 기능에 적어도 하나의 플러그인이 필요합니다. postcss는

전처리 자 : 강점과 약점 Sass, Less 및 Stylus와 같은 전처리 기는 중첩, 변수 및 Mixins와 같은 기능을 도입하여 CSS 관리 개선을 도입했습니다. 이러한 기능 중 일부는 기본 CS가되고 있지만, 전처리 기는 대규모 프로젝트에 가치가 있으며 코딩 일관성을 유지하는 데 가치가 있습니다. 그러나 그러나 전처리 기에는 한계가 있습니다

제한된 확장 성 :

전처리 서기는 고정 된 기능 세트를 제공하므로 내장 기능을 넘어 기능을 확장하기가 어렵습니다. 사용자 정의 기능이 가능할 수 있지만 복잡한 작업 (예 : Inlining SVGS)은 범위를 벗어납니다. 코딩 스타일을 시행하는 것도 어려운 일입니다 비표준 구문 :
• 사전 처리기는 브라우저 해석 전에 컴파일이 필요한 자체 구문을 소개합니다. 이렇게하면 전처리기가 변경되거나 사용할 수없는 경우 종속성 문제를 생성하고 코드 업데이트가 필요합니다.
postcss는 설득력있는 대안을 제공합니다
• postcss 이해
• postcss는 전처리자가 아닙니다. CSS 변압기입니다. 유효한 CS를 처리하여 플러그인을 통해 향상시킵니다. SASS/LESS 사용자조차도 초기 편집 후 PostCS를 종종 통합합니다. 일반적인 PostCSS 플러그인 인 AutoPrefixer는 자동으로 공급 업체 접두사를 추가합니다 postcs 자체는 수동적이다. 그것은 CSS를 AST로 구문 분석합니다. 플러그인은이 AST를 처리하여 속성을 수정합니다. 그런 다음 Postcss는 수정 된 AST.
에서 CSS를 재생합니다 약 350 개의 플러그인을 사용할 수있는

핸들링, 단순화, 이미지 자산 처리, 라인 및 미니 화와 같은 작업을 포함하여 Postcss는 광범위한 유연성을 제공합니다. 사용자 친화적 인 플러그인 검색은 PostCSS 플러그인 카탈로그를 통해 액세스 할 수 있습니다. postcss 장점은 다음과 같습니다 @import 표준 CSS : calc() PostCSS는 표준 CSS와 작동하여 뒤로 호환성을 제공합니다. 최신 속성을 이전 등가물로 변환 할 수있어 브라우저 지원이 향상됨에 따라이 프로세스가 필요하지 않습니다. 플러그인은 전처리업자와 같은 구문을 처리 할 수 ​​있지만 필수는 아닙니다

사용자 정의 가능한 기능 :

필요한 플러그인과 기능 만 사용하십시오. 이를 통해 CSS 처리 파이프 라인을 세밀하게 제어 할 수 있습니다. 프로젝트 별 구성 :

각 프로젝트마다 개별적으로 플러그인을 구성하여 특정 요구 사항에 적응합니다. 사용자 정의 플러그인 개발 : javaScript에서 사용자 정의 플러그인 생성 PostCSS의 기능을 확장하십시오.
전위 전처리 서서 교체 :
• autopRefixer와 같은 플러그인을 이미 사용하고 있다면 PostCSS는 전처리를 대체하여 워크 플로를 단일 단계로 간소화 할 수 있습니다. Postcss 설치 및 사용
postcss는 node.js가 필요합니다. 이 안내서는 명령 줄 설치 및 사용을 보여 주지만 빌드 도구와의 통합도 가능합니다.
• 전역 설치 :
설치 확인 :
• 플러그인 설치 (PostCSS-Import) :
, 및 파일을 포함하는 샘플 프로젝트 ()를 만듭니다 (원본 텍스트에 설명 된대로). 그런 다음 postcss : 를 실행하십시오 소스 맵, autopRefixer 및 미니 화 postcss는 기본적으로 인라인 소스 맵을 생성합니다. 외부지도에는 를 사용하고 를 사용하여 비활성화하십시오 (생산 권장). AutoPrefixer는 공급 업체 접두사를 추가합니다
• CSSNANO는 CSS를 최소화합니다 명령에 포함시키고 생산에 를 사용하십시오. 자동화 된 빌드 및 구성 파일
및

옵션은 파일 변경에 자동 재 구축을 가능하게합니다. a 파일 간소화 구성 :

개발 모드에

를 사용하고 생산을 위해 생략하십시오.

결론
1. postcss는 CSS 처리에 유연하고 강력한 접근 방식을 제공합니다. 플러그인 시스템을 마스터하면 모든 웹 프로젝트에 대해 고도로 사용자 정의되고 효율적인 워크 플로를 만들 수 있습니다. 추가 리소스는 원본 텍스트로 제공됩니다. FAQ는 원래 텍스트 끝에도 포함되어 있습니다.

위 내용은 Postcs에 대한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!