반응형
PostCSS
PostCSS는 CSS 전처리기 중 하나로 알려져 있는데, 정확히는 동작 순서에 따라 CSS 후처리기(CSS Post-processor)가 맞다. 따라서, 한 프로젝트에 SCSS 같은 전처리기와 함께 사용할 수 있다. Sass, LESS, Stylus 등의 CSS 전처리기는 CSS가 생성되기 전에 각자 고유의 파일 확장자를 가진다(*.scss, *.less, *.styl). 그 후, 생성된 파일이 컴파일을 통해 CSS로 변환된 후에 PostCSS에 의해 최종 변환된다.
PostCSS의 장점
- 모듈식 사용: 필요한 플러그인만 찾아서 사용하면 되기 때문에 속도가 빠르다. (https://www.postcss.parts/)
- JavaScript 기반: 필요한 플러그인을 직접 개발할 수 있다.
- CSS 표준 문법 기반: CSS와 문법이 같기 때문에 별도의 문법 공부가 필요 없다.
- npm을 통한 설치: Vue.js나 React.js 등 프레임워크에서 활용이 쉽다.
PostCSS의 단점
- Sass에 비해 문법이 약하다.
- 플러그인 의존도가 높다(PostCSS는 플러그인을 연결해주는 역할만 하기 때문에 원하는 플러그인이 있을 때마다 설치해야 함).
- 플러그인의 지원이 중단될 수 있다.
인기 있는 PostCSS 플러그인
autoprefixer
-webkit- 등의 prefix를 자동으로 넣어주는 플러그인이다.
// 변환 전
.box {
display: flex;
}
// 변환 후
.box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
postcss-modules-values
// colors.css (변수를 할당할 파일)
// @value (key): (value); 형식으로 변수 할당
@value markBlack: black;
@value markWhite: white;
@value markDarkWhite: #f5f5f3;
// index.module.css
@value markBlack from './common/colors.css';
@value markWhite from './common/colors.css';
.container {
background-color: markBlack;
color: markWhite;
}
postcss-color-function
밝기를 조정하는 color modifier다.
// 변환 전
a {
color: color(red lightness(+10%));
}
// 변환 후
a {
color: rgb(255, 51, 51);
}
postcss-nesting
중첩(nested) 구조를 사용할 수 있으나, Sass에서 기본 지원된다. 조만간, 기본 CSS에도 추가될 것이라고 하니 참고만 하자.
postcss-for
for 반복문을 사용할 수 있는 플러그인이다.
PostCSS 공식 웹 사이트
PostCSS - a tool for transforming CSS with JavaScript
Enforce consistent conventions and avoid errors in your stylesheets with stylelint, a modern CSS linter. It supports the latest CSS syntax, as well as CSS-like syntaxes, such as SCSS.
postcss.org
반응형
'웹_프론트엔드 > 로드맵 챌린지' 카테고리의 다른 글
빌드 도구 - 모듈 번들러, webpack (0) | 2022.01.26 |
---|---|
빌드 도구 - 태스크 러너, npm scripts (0) | 2022.01.25 |
CSS 구조 - BEM 방법론 (0) | 2022.01.20 |
패키지 매니저 - npm vs. yarn (0) | 2022.01.18 |
웹 보안 지식 - OWASP 보안 취약점 Top 10 (2021년 버전) (0) | 2022.01.14 |