기본적인 css만으로는 코드를 중복적으로 적어야 하고 다른 브라우저 호환성을 위해서 반복적으로 해야할 일들이 있음.
이런부분을 간편하게 하기 위해서 css전처리기가 나왔습니다.
PostCss, LESS, SASS, 스타일러스
얘네들의 프레임 워크에 맞게 문법을 공부하고 그 에 맞춰서 css를 작성하고 배포하면 얘네들이 그 코드를 순수 CSS로 변환(compile)해서 브라우저가 이해할 수있게 해준다.
SASS
PostCss는 프레임워크 그 틀을 꼭 지켜야 하는 LESS, SASS와 달리 플러그 인이 다양해요.
PotCss create react-app에서 eject했을 때 package.json에 postcss관련된게 설치되는 것을 볼수 있습니다.
yarn.lock파일에 보면 별도로 설정하지 않아도 autoprefix가 있을 거에요. 그러면 postcss를 사용 할 수 있다는 거에요.
sass-한정적/postcss-다양 우리가 원하는 것을 좀 더 쓸수있어요.
fullscreen이라는 상태 css를 쓰게 되면 webkit과 마이크로소프트 브라우저와 호환이 되려면 prefix를 사용해야하는데 postcss는 우리가 이런게 있는지 몰라도 알아서 해줌.
최신 문법 그리드 color사용할 수 있게 해줌.
모듈화가 가능->뱀같이 복잡한 이름을 적지않아도 간편하게 관리 할 수있습니다.
플러그인사용
PostCSS: https://postcss.org/
PostCSS Plugins: https://www.postcss.parts/
Plugins Github 페이지: https://github.com/postcss/postcss/blob/master/docs/plugins.md
autoprefix가 어떻게 되고 있는지
css파일에 fullscreen을 작성하고 이것을 빌드하고 나면 생기는 build 폴더안에 css부분을 살펴보면 webkt과 ms 프리픽스가 자동적으로 붙어져있어요. 우리는 전혀 신경쓰지않고 작성해고 결국 PostCss의 autoprefix가 이런식으로 모든 프리픽스를 붙여 줍니다.
이것은 현재 브라우저의 시장 점유율고 호환성 문제를 자동으로 정보 수집해서 그것을 바탕으로 이렇게 처리 되는 것이에요.