Sass에 대한 구성 가능한 대안으로 PostCS를 사용하는 방법

웹 개발자는 SASS CSS 사전 처리기를 좋아합니다. CSS State Survey의 SASS의 견해에 따르면 모든 개발자는 SASS를 이해하고, 개발자의 89%가 정기적으로 사용하며, 개발자의 88%가이를 매우 만족합니다.

많은 웹 패키지에는 SASS 처리가 포함되지만 알지 못하고 PostCS를 사용할 수도 있습니다. Postcss는 주로 AutopRefixer 플러그인으로 유명하며, 필요할 때 -webkit, -moz 및 -ms 벤더 접두사를 자동으로 추가합니다. 플러그인 시스템은 더 많은 작업을 수행 할 수 있음을 의미합니다 ... 예를 들어, SASS 컴파일러를 사용하지 않고 .SCSS 파일을 컴파일 할 수 있습니다.

이 자습서는 SASS 구문을 컴파일하고 더 많은 기능을 추가하는 사용자 정의 CSS 전 처리기를 만드는 방법을 설명합니다. Node.js를 알고 특정 CSS 요구가있는 사람에게는 이상적입니다.

키 포인트 구성 가능성 및 사용자 정의 : PostCSS는 SASS에 비해 구성 가능한 환경을 제공합니다. 플러그인 아키텍처를 기반으로 실행되며 각 플러그인은 특정 작업을 수행하므로 개발자가 특정 프로젝트 요구에 따라 설정을 사용자 정의 할 수 있습니다.

성능 참고 사항 : 다트 기반 SASS 컴파일러는 빠르지 만 JavaScript를 구축 한 PostCS는 느리게 진행됩니다. 그러나 이미 PostCS를 사용하는 프로젝트의 경우 속도 차이는 무시할 수 있으므로 실행 가능한 단일 프로세스 솔루션입니다.

설치 및 설정 : PostCS는 다양한 빌드 도구와 통합되거나 명령 줄에서 실행할 수 있습니다. SASS와 같은 환경의 기본 설정은 ,

, 및 와 같은 여러 플러그인을 설치해야합니다. 플러그인을 사용하여 기능을 향상시킵니다. PostCSS는 기존 전처리 기능을 넘어서서 플러그인은 디자인 토큰을 처리하고 미디어 쿼리를 최적화하며 자산을 관리하며 조건부에 따라 CSS 압축을 수행 할 수 있습니다.

개발 스택을 단순화 할 수있는 잠재력 : 이미 PostCSS를 사용하는 팀의 경우 개발 스택에서 SASS를 완전히 제거하고 SASS와 같은 구문 및 기능을 처리하는 등 모든 CSS 처리 요구를 충족시키기 위해 PostCS에 의존 할 수 있습니다.
• 빠른 시작 postcss 샘플 프로젝트는 Github에서 클로닝 될 수 있습니다. Node.js가 필요하므로 모든 종속성을 얻으려면 NPM 설치를 실행하십시오.
Demo Src/SCSS/Main.Scss 소스 코드를 컴파일하여 다음 명령을 사용하여/css/main.css를 빌드합니다.
• 파일이 변경 될 때 다음 명령을 사용하여 자동으로 컴파일하십시오. postcss-scss 그런 다음 터미널에서 postcss-advanced-variables ctrl postcss-nested |를 눌러 모니터링하십시오. autoprefixer 이 두 옵션은 또한 개발자 도구에서 원본 소스 파일을 참조하는 Build/Css/Main.css.map에서 소스 맵을 만듭니다.
소스 맵이없는 생산 수준 압축 CSS는 다음 명령을 사용하여 컴파일 할 수 있습니다.
• 자세한 내용은 readme.md 파일을 참조하십시오.
Sass를 Postcss로 교체해야합니까?
• SASS 컴파일러에는 아무런 문제가 없지만 다음 요소를 고려하십시오.
모듈 종속성 Dart Sass의 최신 버전은 Node.js NPM 패키지 관리자를 사용하여 전 세계적으로 설치할 수 있습니다.

다음 명령으로 sass .scss 코드를 컴파일하십시오

소스 맵을 자동으로 생성하십시오 (-노스 맵이 닫히게됩니다) 또는 소스 파일이 변경 될 때 자동으로 컴파일하기 위해-워치를 추가합니다.

SASS 설치 공간의 최신 버전은 5MB 미만입니다.

postcsss

<code>npm run css:dev</code>

는 더 적은 리소스가 필요해야하며, 자동 접두사와 압축이있는 기본 Sass 스타일 컴파일러에는 1MB 미만의 공간이 필요합니다. 실제로 Node_Modules 폴더는 60MB 이상으로 확장되며 더 많은 플러그인이 추가되면 빠르게 증가합니다. 이것은 주로 NPM에 다른 종속성을 설치하는 것입니다. PostCS가 사용하지 않더라도 가벼운 대안으로 간주 될 수 없습니다.

그러나 AutoPrefixer 또는 기타 목적으로 이미 PostCS를 사용하고 있다면 SASS가 필요하지 않을 수 있습니다.

프로세싱 속도

<code>npm run css:watch</code>

느린 루비 기반 SASS 컴파일러가 오랫동안 사라졌으며 최신 버전은 컴파일 된 다트 런타임을 사용합니다. 매우 빠릅니다.

postcss는 순수한 JavaScript이며 벤치 마크는 다르지만 동일한 소스 코드를 컴파일 할 때 3 배 느릴 수 있습니다.

그러나 Sass 이후 이미 PostCS를 실행하고 있다면이 속도 차이는 눈에 띄지 않습니다. 2 단계 프로세스는 PostCS 만 사용하는 것보다 느릴 수 있습니다. 많은 작업에는 CSS 특성의 토큰 화가 포함되므로.
커스텀 Sass Language는 변수, 중첩, 부품, 믹싱 등을 포함한 많은 기능이 포함되어 있습니다. 그러나 몇 가지 단점이 있습니다 :

새로운 기능을 쉽게 추가 할 수 없습니다.

HSLA 색상을 RGB로 변환하는 옵션이 필요할 수 있습니다. 사용자 정의 기능 작성이 가능할 수 있지만 다른 요구 사항은 불가능합니다 (예 : 인라인 SVG는 배경 이미지).

기능 세트를 쉽게 제한 할 수 없습니다.

당신은 당신의 팀이 Nesting 또는 @extend를 사용하지 않는 것을 선호 할 수 있습니다. Lint Rules는 도움이되지만 Sass가 유효한 .SCSS 파일을 컴파일하는 것을 방해하지는 않습니다.

postcss는 구성하기가 더 쉽습니다.

postcss 자체는 아무것도하지 않습니다. 처리 기능에는 하나 이상의 사용 가능한 플러그인이 필요합니다. 대부분의 플러그인은 단일 작업을 수행하므로 중첩이 필요하지 않은 경우 중첩 플러그인을 추가하지 마십시오. 필요한 경우 Node.js의 기능을 활용하는 표준 JavaScript 모듈을 사용하여 자체 플러그인을 작성할 수 있습니다.

postcss 를 설치하십시오 PostCSS는 WebPack, Parcel, Gulp.js 및 기타 빌드 도구와 함께 사용할 수 있지만이 자습서는 명령 줄에서 실행하는 방법을 보여줍니다.

필요한 경우 npm init를 사용하여 새 node.js 프로젝트를 초기화하십시오. 부분, 가변, 믹스, 네스트 및 자동 준비금을 위해 플러그인을 사용하여 기본 .SCSS 파싱을 수행하기 위해 다음 모듈을 설치하여 PostCS를 설정하십시오.

샘플 프로젝트와 마찬가지로 PostCSS 및 플러그인은 로컬로 설치됩니다. 프로젝트마다 컴파일 요구 사항이 다를 수있는 경우 실제 옵션입니다.

참고 : PostCSS는 JavaScript 파일에서만 실행할 수 있지만 PostCSS-CLI 모듈은 명령 줄에서 호출 할 수있는 래퍼를 제공합니다. PostCSS-SCSS 모듈을 통해 PostCSS는 .SCSS 파일을 읽을 수 있지만 변환하지는 않습니다. autoprefixer configuration AutoPrefixer는 BrowsersList를 사용하여 지원하는 브라우저 목록을 기반으로 필요한 공급 업체 접두사를 결정합니다. 가장 쉬운 방법은 Package.json의 "BrowsersList"배열로 정의하는 것입니다. 다음 예제는 브라우저가 시장 점유율의 2% 이상을 가질 때 공급 업체 접두사를 추가합니다.

첫 번째 빌드 당신은 일반적으로 필요한 부분/구성 요소 파일을 가져 오는 단일 루트 sass .scss 파일이 있습니다. 예를 들면 :
컴파일은 npx postcss를 실행 한 다음 입력 파일, -출력 파일 및 필요한 옵션을 실행하여 시작할 수 있습니다. 예를 들면 :
이 명령 :

<code>npm run css:dev</code>

분석 ./src/scss/main.scss ./build/css/main.css <_> 설정 Node_env 환경 변수를 개발에 설정하십시오 출력 외부 소스 맵 파일 세부 출력 및 오류 메시지를 설정하십시오 postcss-scss sass parser를 설정하고 플러그인 사용 Postcss-Advanced-Variables, Postcs-Nested 및 AutoPrefixer 부품, 변수, 믹싱, 중첩 및 autoprefixer를 처리합니다 또는 .scss 파일을 수정할 때 자동 컴파일을 위해 -watch를 추가 할 수 있습니다.

postcss configuration 파일 생성 더 긴 플러그인 목록의 경우 명령 줄을 빠르게 처리하기가 어려워 질 수 있습니다. NPM 스크립트로 정의 할 수 있지만 PostCSS 구성 파일은 다른 가능성을 제공하는 간단한 옵션입니다.

postcss configuration 파일은 postcss.config.js라는 JavaScript 모듈 파일입니다. 모듈은 단일 함수를 내보내야합니다

<code>npm run css:watch</code>

PostCSS 명령에 의해 설정된 속성이있는 CFG 객체를 전달합니다. 예를 들면 :
당신은이 속성을 확인하고 그에 따라 반응 할 수 있습니다 - 예를 들어, 개발 모드에서 실행 중인지 여부와 .SCSS 입력 파일을 처리하는지 여부를 결정합니다.

<code>npm run css:build</code>

함수는 속성 이름이 PostCSS-CLI 명령 줄 옵션과 일치하는 객체를 반환해야합니다. 다음 구성 파일은 위의 긴 빠른 시작 명령을 복사합니다.

이제 더 짧은 명령으로 postcs를 실행할 수 있습니다 :

다음은 몇 가지 주목할 것입니다 :
-Verbose는 선택 사항입니다. postcss.config.js에 설정되지 않습니다.
1. SASS 구문 구문 분석은 입력이 .SCSS 파일 인 경우에만 적용됩니다. 그렇지 않으면 표준 CSS로 기본적으로 표시됩니다.
소스 맵은 -env가 개발로 설정된 경우에만 출력됩니다.
2. 당신은 여전히 ​​자동 컴파일을 위해 -시계를 추가 할 수 있습니다.
3. 다른 디렉토리에 postcss.config.js를 넣는 것을 선호하는 경우 ---config 옵션 (예 : -config /mycfg /)으로 참조 할 수 있습니다. 예제 프로젝트에서 위 구성은 config/postcss.config.js에 있습니다. NPM 실행 CSS : BASIC을 실행하여 참조합니다.

   <code>npm run css:dev</code>

   더 많은 플러그인을 추가하십시오 다음 섹션은 추가 .SCSS 구문을 구문 분석하거나 SASS 컴파일러의 범위를 넘어서 처리 기능을 제공 할 수있는 PostCSS 플러그인의 몇 가지 예를 제공합니다. 디자인 토큰 사용 디자인 토큰은 회사 전체의 글꼴, 색상, 간격 등과 같은 변수를 저장하는 기술 독립적 인 방법입니다. 토큰 이름 -Value 쌍을 JSON 파일에 저장할 수 있습니다 :

   그런 다음 웹, Windows, MacOS, iOS, Linux, Android 또는 기타 응용 프로그램에서 참조하십시오.

   Sass는 디자인 토큰을 직접 지원하지 않지만 변수 속성 (이름 값 쌍을 보유하는)을 가진 JavaScript 객체는 기존 PostCSS- Advanced-Variables PostCSS 플러그인으로 전달할 수 있습니다.

   플러그인은 모든 값을 모든 부분에서 사용할 수있는 글로벌 SASS $ 변수로 변환합니다. 변수가 토큰에 누락 된 경우에도 변수를 사용할 수 있도록 폴백 값을 설정할 수 있습니다. 예를 들면 :

   <code>npm run css:watch</code>

   그런 다음 토큰 변수는 .SCSS 파일에서 참조 할 수 있습니다. 예를 들면 :
   예제 프로젝트에서, token.json 파일이 정의되어 있으며, 이는 npm run css : dev를 실행할 때로드 및 사용됩니다.
   Sass 맵은 키 가치 객체입니다. MAP-get 함수는 이름별로 값을 찾을 수 있습니다.

   <code>npm run css:build</code>

   다음 예제는 미디어 쿼리 브레이크 포인트를 SASS 맵으로 정의하고 응답 믹스를 사용하여 명명 된 값을 얻습니다.

   그런 다음 기본 속성 및 미디어 쿼리 수정을 동일한 선택기에서 정의 할 수 있습니다. 예를 들면 :

   <code>npm install -g sass</code>

   CSS로 편집 :

   postcss-map-get 플러그인은 SASS 맵 처리를 추가합니다. 다음 명령으로 설치하십시오

   그런 다음 postcss.config.js에 추가하십시오

   <code>sass [input.scss] [output.css]</code>

   미디어 쿼리 최적화 추가

   우리는 미디어 쿼리를 추가 했으므로이를 결합하여 모바일 우선 순위로 정렬하는 것이 유용합니다. 예를 들어, 다음 CSS :

   는 다음과 병합 될 수 있습니다

   이것은 SASS에서는 불가능하지만 PostCSSSS-Sort-Media-Queries 플러그인을 사용하여 구현할 수 있습니다. 다음 명령으로 설치하십시오

   그런 다음 postcss.config.js에 추가하십시오

   자산 처리 추가 자산 관리는 SASS에서 제공되지 않지만 PostCSS-Assets는 쉽게 만듭니다. 플러그인은 CSS 이미지 URL을 구문 분석하고, 캐시 지우기를 추가하고, 이미지 크기를 정의하며, Base64 표기법을 사용하여 파일을 인선으로 인쇄합니다. 예를 들면 :
   컴파일 된 다음 :

   <code>npm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer</code>

   다음 명령을 사용하여 플러그인을 설치하십시오

   그런 다음 postcss.config.js에 추가하십시오. 이 경우 플러그인은 SRC/ Images/ Directory에서 이미지를 찾도록 지시받습니다.

   압축 를 추가하십시오 CSSNANO는 CSS 압축의 표준을 설정합니다. 압축은 다른 플러그인보다 더 많은 처리 시간이 필요할 수 있으므로 프로덕션에서만 적용 할 수 있습니다.

   <code>"browserslist": [
     "> 2%"
   ],</code>

   다음 명령을 사용하여 Cssnano를 설치하십시오

   그런 다음 postcss.config.js에 추가하십시오. 이 경우 Node_env가 개발 이외의 다른 것으로 설정된 경우에만 압축이 수행됩니다.

   <code>npm run css:dev</code>

   설정 -생산에 대한 압축 트리거 (및 소스 맵을 제거) :

   예제 프로젝트에서 NPM Run CSS : Build를 실행하여 생산 CSS를 컴파일 할 수 있습니다.

   postcss로 마이그레이션합니까?

   <code>npm run css:watch</code>

   postcss는 .SCSS 파일을 컴파일하고 표준 SASS 언어를 강화 (또는 제한) 할 수있는 강력하고 구성 가능한 도구입니다. AutoPrefixer에 이미 PostCSS를 사용하는 경우 좋아하는 구문을 유지하면서 SASS 컴파일러를 완전히 제거 할 수 있습니다.

   <: :> 더 많은 링크 :

   Sass Langu postcss 홈 페이지 Postcss 플러그인 목록 Postcss 플러그인을위한 검색 가능한 디렉토리 npmjs.com의 엽서 플러그인 Postcss 플러그인 쓰기 postcss cli

   postcss 에 대해 자주 묻는 질문 postcss는 무엇입니까? Postcss는 JavaScript 플러그인을 사용하여 스타일을 변환하는 도구입니다. 웹 개발에 일반적으로 사용되며 다양한 플러그인을 사용하여 CSS를 처리하여 표준 CSS의 기능을 향상시키고 확장합니다.

   Postcs는 Sass와 같은 전통적인 CSS 전 처리기와 어떻게 다릅니 까? 기존 전처리 자와 달리 PostCSS 자체는 전처리자가 아니라 플러그인을 사용하여 CSS를 변환하는 도구입니다. 개발자는 특정 프로젝트에 필요한 플러그인 만 선택하여 모듈 식 및 사용자 정의 가능한 메소드를 사용할 수 있습니다.

   PostCS의 일반적인 사용 사례는 무엇입니까? PostCSS는 일반적으로 자동 접두사, 코드 검사, 압축, 가변 교체 및 향후 CSS 구문 호환성과 같은 작업에 사용됩니다. 표준 CSS의 기능을 향상시키기위한 유연하고 모듈 식 시스템을 제공합니다.

   내 프로젝트의 PostCS를 설치하고 설정하는 방법은 무엇입니까? NPM (Node Package Manager)을 사용하여 PostCS 및 플러그인을 설치할 수 있습니다. 설치 후 프로젝트 및 설정의 플러그인을 정의하려면 구성 파일 (일반적으로 Postcss.config.js라고 함)을 작성해야합니다.
   • 자동 접두사 란 무엇이며 PostCS에 유용한 이유는 무엇입니까? Automatic Prefix는 PostCS가 다른 브라우저와의 호환성을 보장하기 위해 CSS 속성에 공급 업체 접두사를 자동으로 추가하는 프로세스입니다. 이를 통해 개발자는 수동 공급 업체 별 접두사를 피하고 클리너 코드를 작성하는 데 도움이됩니다.
   Sass 이외의 사전 처리기와 함께 PostCS를 사용할 수 있습니까? 예, PostCS는 SASS 이하의 전처리기와 함께 사용할 수 있습니다. PostCSS 플러그인을 사용하여 전 처리기의 출력을 추가로 처리하여 두 가지를 모두 활용할 수 있습니다.

위 내용은 Sass에 대한 구성 가능한 대안으로 PostCS를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!