PostCSS Plugin 소개 - postcss-each

오늘의 플러그인은 postcss-each 이다.

 

1. 어떤 기능을 가지고 있는가?

기존 CSS의 attribute selector를 응용한 개념이다.
기존 CSS보다 사용성과 가독성이 좋은 장점이 있으나, 선택자가 많아질 경우 길어질수 있는 단점이 있다.

 

2. 설치법

npm을 통하여 아래와 같이 설치해주면 된다.

 - npm i postcss-each

 

3.  postcss.config.js 에 추가하기

 

 

4. CSS에 적용하기

@each 로 선언을 한후, $classGroup in className 식으로 선언을 해준다.

 

실제로 변환된 CSS는 아래와 같다.

5. 활용도

1번에서 말한 것 같이, CSS Attribute Selector에 대한 개념이 없는 경우

해당 플러그인을 통해 어렵지 않게 진행할 수 있다.

특히 background-image의 url을 컨트롤 할 때

이미지 파일명과 클래스명을 동일하게 가져간다면 CSS를 간단하게 줄일 수 있다.

다만 classGroup in className 형태로 나열해야 하므로

대 카테고리를 여러개로 나눈 후 적은 소 카테고리를 입력하는 것이

관리 및 가독성에 용이할듯 하다.