36. PostCSS

이 강의에서는 PostCSS에 대해 소개합니다.
PostCSS는 SAS와는 다른 접근 방식을 취하는 패키지로, JavaScript로 작성된 라이브러리입니다.
주요 내용은 다음과 같습니다:

PostCSS 개요: PostCSS는 CSS를 객체로 변환하고, JavaScript를 사용해 이 객체를 조작 및 변형한 후 다시 CSS로 컴파일합니다.
이를 통해 CSS 코드를 작성한 후 JavaScript로 상호작용할 수 있습니다.
설치 및 설정: Vite는 PostCSS를 기본적으로 지원하므로 별도의 설치나 설정이 필요 없습니다.
PostCSS를 활성화하기 위해서는 프로젝트 루트 디렉토리에 postcss.config.js 파일을 생성하고, 이 파일에서 설정을 내보내야 합니다.
플러그인 사용: PostCSS는 기본적으로 CSS에 변경을 적용하지 않으며, CSS를 조작하기 위해 플러그인을 설치해야 합니다.
예를 들어, autoprefixer 플러그인은 CSS에 브라우저 벤더 접두사를 자동으로 추가해줍니다.
SASS와의 호환성: PostCSS는 SASS와 함께 사용될 수 있으며, Vite는 먼저 SASS를 컴파일한 후 그 결과를 PostCSS로 전달합니다.
따라서 SASS와 CSS 중 어느 것을 사용하든 상관없습니다.

강의는 PostCSS가 CSS 작업에 유용하며, 다양한 플러그인을 통해 CSS 코드를 변환하고 최적화하는 방법을 설명합니다.
PostCSS는 CSS 코드를 깔끔하게 유지하면서 필요한 변환을 자동으로 수행할 수 있어 개발자의 작업을 간소화합니다.

npm i autoprefixer -D

// postcss.config.cjs
module.exports = {
    plugins: [
        require('autoprefixer'),
    ],
}

::placeholder {
  color: red;
}

위 scss 코드는 autoprefixer 플러그인으로 인해 아래와 같이 컴파일 됩니다.

::-moz-placeholder {
    color: red;
}

::placeholder {
    color: red;
}

# 36. PostCSS