CSS 전처리기

• 편리한 문법을 이용해서 css를 작성하고 추후에 다시 순수 css로 변환해 주는 것
• 다시 말하면 프레임워크의 문법에 맞게 css를 작성하면 사용자에게 배포할 브라우저가 이해할 수 있는 css로 변환이 됨.

✅ 필요한 이유?

• 기본적인 CSS만으로는 중복적으로 작성해야됨
• 브라우저 호환성 위해 필요
• 중복되는 코드를 최소화하기 위해 필요

✅ 종류

• LESS
• SASS
• Stylus(스타일러스)

PostCSS란?

• SASS와 LESS와 같은 프레임워크와 비슷하지만 SASS와 LESS는 제공이 한정적임.
  하지만 POSTCSS는 플러그인이 다양함
  
• create react app 을 할 때 기본적으로 PostCSS가 설치됨
  • package.json or node_modules에서 확인 가능!

✅ autoprefix란?

prefix란?

• 브라우저 별 따로 놀던 CSS3 속성을 잡어주기 위해 사용되기 시작
• 마크업 시 CSS의 Class 앞에 -moz-, -webkit-, -o-, -ms- 와 같이 각 브라우저에서 판독 가능한 접두어를 붙여서 해당 브라우저에서 인식할 수 있게 하는 것

만약 index.css에 아래와 같이 작성하고 빌드를 하면 (최종적으로 사용자에게 배포될 것) 빌드된 css가 생성됨

:fullscreen {
	background-color: pink;
}

• 빌드된 css를 보면 자동적으로 prefix가 붙어있는 것을 볼 수 있음
  • PostCSS의 autoprefix가 모든 prefix를 붙여줌.
    • 현재 브라우저들의 시장 점유율과 호환성 문제를 자동으로 정보 수집해서 처리가 되는 것 (신뢰 가능!!)

참고

• PostCSS
• postcss/plugins
• postcss/plugins_github