반응형


◎ POST CSS란?

▼ 내용

POST CSS는 우리의 CSS를 조금더 현대적으로 바꿔주는 플러그인이다.

좀더 풀어 설명하자면 POST CSS 는 JS 플러그인을 사용하여 CSS를 변환시키는 툴 입니다.

이런 플러그인을 사용하여 lint , 변수 , mixin 을 사용하거나 미래의 css 문법을 사용할수 있습니다.

POST CSS 는 언어가아니라 자동으로 신기술 CSS 를 호환가능하도록 변환시켜주는 플러그인일 뿐이다.

1. CSS에 문제가없는지 미리 확인해서 에러로그를 준다.

2. 지금 발전중인 CSS의 현대기술들을 브라우저에 호환되도록 자동 변환해준다.

공식 문서 https://postcss.org

◎ BEM 란?

▼ 내용

BEM 이라는건 CSS에서 class를 선언하는 방법 중 하나


◎ POSTCSS-preset-env 설치

▼ 내용

POSTCSS 의 수많은 플러그인중 하나이다.

https://preset-env.cssdb.org

preset-env 의 공식문서 과거 이름인 css-next 였다.

https://cssdb.org

css db 는 기본적으로 css의 모든 properties를 포함하고있다.

최근의 나온 property 들은 어느브라우저에서 구현되는지의 정보등을 알려준다.

설치법

npm install postcss-preset-env

완료되면 이렇게 뜬다.



dependencies 부분에 저렇게 추가가 된다.

이걸론 부족하여 추가 설정을 해야한다


"postcss": { "plugins":{ "postcss-preset-env": { "stage": 0 } } }

stage 3은 지원하고 0 은 아직 브라우저에서 지원을 잘 안함


◎ POSTCSS-preset-env 작동 되는지 테스트

▼ 내용

preset-env 에선 작동이 되는지 테스트 코드를 준다.

https://preset-env.cssdb.org/playground

정상적으로 설치가 되었다면 아래의 소스코드를 입력후

웹브라우저로 보면 자동으로 css가 변환이 되있을것이다.

변환이 되있따면 percel 을 통하여 preset-env를 정상 설치한것이다.

@custom-media --viewport-medium (width <= 50rem); @custom-selector :--heading h1, h2, h3, h4, h5, h6; :root { --fontSize: 1rem; --mainColor: #12345678; --secondaryColor: lab(32.5 38.5 -47.6 / 90%); } html { overflow: hidden auto; } @media (--viewport-medium) { body { color: var(--mainColor); font-family: system-ui; font-size: var(--fontSize); line-height: calc(var(--fontSize) * 1.5); overflow-wrap: break-word; padding-inline: calc(var(--fontSize) / 2 + 1px); } } :--heading { margin-block: 0; } .hero:matches(main, .main) { background-image: image-set("img/background.jpg" 1x, "img/background-2x.jpg" 2x); } a { color: rgb(0 0 100% / 90%); &:hover { color: rebeccapurple; } }




반응형

+ Recent posts