CSS 마법사를 만들기위한 10 가지 굉장한 PostCSS 플러그인
PostCSS는 매우 다양한 도구로서 자바 스크립트 플러그인으로 CSS 스타일 변환. 그것의 융통성은 건축되는 방법에서 속인다.
PostCSS의 핵심 부분은 npm으로 설치할 수있는 Node.js 모듈이며 프로젝트에서 사용할 수있는 200 개 이상의 플러그인으로 구성된 생태계를 가지고 있습니다.
PostCSS 플러그인은 전처리 기가 아니고 후 처리기가 아니기 때문에 다른 PostCSS 플러그인이이 범주 중 하나 또는 둘 다에 속할 수 있습니다. 그것은 당신이 당신이 무엇을 만드 느냐에 달려 있습니다. PostCSS를 사용하면 다른 구문을 배울 필요가 없다. Sass 또는 LESS의 경우와 같습니다. 당신은 즉시 그것을 사용할 수 있습니다..
PostCSS는 기존 CSS 파일을 가져 와서 JavaScript로 읽을 수있는 데이터로 변환 한 다음 JavaScript 플러그인이 수정 작업을 수행하고 PostCSS가 원본 파일의 변경된 버전을 반환합니다. 멋지다, 그렇지 않아.?
이 글에서는 10 개의 PostCSS 플러그인을 살펴볼 것입니다. 당신이 얻을 수있는 위대한 일들에 대한 통찰력을 주라. 이 멋진 도구로.
1. 자동 프리 픽서
자동 프리 픽서 아마도 구글, 트위터, Shopify와 같은 주목할만한 기술 회사에서 사용하는 가장 유명한 PostCss 플러그인 일 것입니다. 그것 필요한 경우 CSS 규칙에 공급 업체 접두어를 추가합니다..
자동 프리 픽자는 사용할 수있는 데이터를 사용합니다. 이렇게하면 날짜가 지정되지 않고 항상 최신 규칙을 적용 할 수 있습니다. 인터랙티브 데모 사이트에서 어떻게 작동하는지 확인할 수 있습니다..
2. CSSnext
CSSnext 는 CSS transpiler입니다. 현재 사이트에서 향후 CSS 구문을 사용할 수 있습니다.. W3C에는 현재 브라우저에서 구현되지 않은 새로운 CSS 규칙이 많이 있지만 개발자가 더 정교한 CSS를 더 빠르고 쉽게 작성할 수 있습니다. CSSnext는이 차이를 줄이기 위해 만들어졌습니다..
이 기능을 사용하여 수행 할 수있는 기능을 확인하려면 해당 기능을 살펴 보는 것이 좋습니다. 예를 들어 다음과 같이 할 수 있습니다. 사용자 지정 미디어 쿼리, 사용자 지정 선택기, 색상 수정 자, SVG 필터 및 새 가상 클립 사용 당신의 디자인에.
3. PreCSS
PreCSS CSS 전처리 기처럼 작동하는 PSTCSS 플러그인 중 하나입니다. 그것은 가능하게한다. 당신의 sytlesheet 파일에서 Sass 같은 마크 업을 이용하십시오..
PreCSS를 워크 플로우에 도입함으로써 변수를 사용할 수 있습니다., 다른 경우라면 성명, ...에 대한 루프, 믹스 인, @넓히다 과 @수입 규칙, 중첩 및 기타 많은 편리한 기능을 CSS 코드에서 사용할 수 있습니다. PreCSS의 Github 문서는 그것을 최대한 활용하는 방법에 대한 자세한 지침을 제공합니다..
4. StyleLint
StyleLint 현대 CSS linter입니다 CSS 코드를 교정하고 유효성을 검사합니다.. 오류를 쉽게 피하고 일관된 코딩 규칙을 따르도록합니다..
StyleLint는 최신 CSS 구문을 이해하므로 이전에 언급 한 PreCSS 플러그인과 함께 사용할 수 있습니다. 또한 자신의 구성을 만들 수 있으며 설정이 유효한지 검사 할 수도 있습니다..
5. PostCSS 자산
PostCSS Assets 플러그인은 편리합니다. CSS 파일의 자산 관리자. PostCSS Assets가 스타일 시트 파일을 환경 변화로부터 격리 시키므로 URL 경로에 문제가있는 경향이있는 경우에 매우 유용 할 수 있습니다.
로드 경로, 상대 경로 및 기본 경로를 정의해야하며 플러그인은 필요한 자산을 자동으로 찾습니다. 예를 들어 적절한 URL이 필요한 경우 다음 코드를 작성할 수 있습니다. foobar.jpg 영상:
body background : resolve ( 'foobar.jpg');
PostCSS 자산 자산 캐시 처리, 당신이 캐시 버스터 변수를 true로 변경하면 애셋이 수정 될 때 URL 경로가 자동으로 변경됩니다. 이 스마트 플러그인은 이미지 파일의 크기 (너비와 높이)를 계산하거나 미리 설정된 비율로 크기를 조정합니다..
6. CSSNano
제작 사이트 용으로 최적화되고 축소 된 CSS 파일이 필요한 경우 체크 아웃 할 가치가 있습니다. CSSNano. 그것은 작고, 책임감있는 많은 PostCSS 플러그인으로 구성된 모듈 형 플러그인입니다. 공백 제거와 같은 기본적인 축소 기술을 수행 할뿐만 아니라 최적화 최적화를 가능하게하는 고급 옵션도 제공합니다..
다른 많은 기능 중에서도 CSSNano는 Z- 색인 값을 재설정하고 사용자 정의 식별자를 줄이며 길이, 시간 및 색상 값을 변환하고 오래된 공급 업체 접두사를 제거 할 수 있습니다.
7. 폰트 마술사
세련된 타이포그래피의 팬이라면 반드시 글꼴 마술사 PostCSS 플러그인. 글꼴 마술사의 마법은 그 능력에 의존합니다. 필요한 모든 것을 자동으로 생성 @ font-face 규칙들.
작동 원리는 매우 간단합니다. font-family : "My Fav Font"; CSS 규칙을 HTML 요소에 적용하고 Font Magician이 나머지 작업을 수행합니다. Google 글꼴, 글꼴의 로컬 사본, 부트 스트랩 인쇄술을 추가 할 수 있으며 글꼴을 비동기 적으로로드 할 수도 있습니다. 대화 형 데모 사이트가 있습니다..
8. SVG 쓰기
SVG를 CSS 파일에 직접 작성하는 것이 얼마나 시원할 지 궁금하신 적이 있으십니까? Write SVG PostCSS 플러그인 덕분에이 목표를 쉽게 달성 할 수 있습니다.
이 편리한 플러그인은 예를 들어, SVG 배경과 아이콘을 CSS 파일에 저장하십시오., 나중에 관련 HTML 요소에 추가하십시오. 다음과 같은 방법으로
@svg square @rect fill : var (- color, black); 너비 : 100 %; 높이 : 100 %; .example background : white svg (square param (- color # 00b1ff)) 표지;
9. 잃어버린 눈금
잃어버린 눈금 인상적인 플러그인을 제공하는 훌륭한 PostCSS 플러그인입니다. CSS 그리드 시스템 그뿐 아니라 일반 CSS와 함께 작동합니다. 뿐만 아니라 전 처리기 언어 (Sass, LESS, Stylus). 그것은 calc () 커스텀 화에 너무 많은 시간을 소비하지 않고도 쉽게 사용할 수있는 아름다운 그리드를 생성하는 CSS 기능.
Lost Grid는 꽤 간단한 규칙을 가지고 있습니다. 예를 들어, 25 % 너비의 열 정의는이 작은 코드 스 니펫을 넘지 않습니다.
div 손실 된 열 : 1/4;
10. PostCSS 스프라이트
그만큼 PostCSS 스프라이트 플러그인으로 쉽게 이미지 스프라이트 생성, 단일 파일에 배치 된 이미지 모음 몇 가지 옵션을 설정하면 플러그인이 스타일 시트 파일의 이미지를 가져 와서 스프라이트로 병합 한 다음 필요할 때마다 이미지 참조를 업데이트합니다..
다른 필터와 그룹화를 사용하여 스프라이트에 넣을 이미지를 결정할 수 있으며 출력 이미지의 크기도 설정할 수 있습니다..
