반응형 WEB, APP/PostCSS6 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에 대한 개념이 없는 경우 해당 플러그인을 통해 어렵지 않게 진행할 수 있다.. 2020. 11. 25. PostCSS Plugin 소개 - PreCSS 오늘의 플러그인은 PreCSS다. 1. 어떤 기능을 가지고 있는가? Sass에서 사용되는 $변수를 활용한 CSS를 똑같이 구현해주는 기능을 가지고 있다. 2. 설치법 npm을 통하여 아래와 같이 설치해주면 된다. - npm install precss --save-dev 3. postcss.config.js 에 추가하기 4. CSS에 적용하기 우선 상단에 변수 명을 선언한 후, 값을 정해준다. 그 후, 클래스에 css 속성을 넣는다. 그후 PostCSS를 통해 하단과 같이 재생성된 CSS 결과물이 적용됩니다. 2020. 8. 28. PostCSS Plugin 소개 - easings 오늘 소개할 플러그인은 postcss-easings 라는 플러그인이다. 이름에서부터 CSS easing과 관련된 플러그인임을 알 수 있다. 1. 어떤 기능을 가지고 있는가? PostCSS plugin to replace easing name from easings.net to cubic-bezier(). github.com/postcss/postcss-easings에 적혀있는 본문은 위와 같고, 번역을 간단히 해보면 CSS transition을 easing.net에 있는 easing 이름으로 활용할 수 있다. 라고 되어있다. 혹은, 본인이 스스로 cubic-beizer를 만들어서 사용해도 된다. 2. 설치 npm으로 설치하면 된다. - npm i postcss-easings 3. easing.net의 속.. 2020. 8. 25. PostCSS Plugin 소개 - Autoprefixer 첫째로 소개할 플러그인은 'autoprefixer' 라는 플러그인이다. PostCSS에서 가장 많이 사용되며 공식페이지 방문시 가장 먼저 노출될 정도로 인기가 많은 플러그인이다. 1. 어떤 기능을 가지고 있는가? 'Add vendor prefixes to CSS rules using values from Can I Use. Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you.' 공식 홈페이지에는 상단처럼 적혀있는데, 'Can I Use'(https://caniuse.com/) 에 등록되어 있는 CSS 속성의 vendor-prefix를 접속하는 브라우저에 .. 2020. 8. 24. Vue.JS에 PostCSS 설치하기 이번 글에서는 Vue.JS에 PostCSS를 설치하는 방법을 적어보려 한다. (Vue cli 가 설치된 상태를 가정하고 진행하도록 하겠다.) 1. webpack.config.js 'test : ' 의 경우는 어떤 파일 확장자를 사용할것인지를 의미한다.(위의 소스에서는 CSS만 적용되도록) 'use : ' 의 경우는 어떤 loader를 사용할것인지를 의미한다. - style-loader : javascript로 변경된 CSS를 동적으로 돔에 추가하는 loader. CSS 를 JS로 변환한뒤 다시 CSS로 재가공 하는 PostCSS의 경우 필수적이다. - postcss-loader : PostCSS를 사용하기 위해 추가. 2. postcss.config.js 'require()' 에는 ()안에 본인이 쓰고자.. 2020. 8. 21. About PostCSS 웹과 앱에서 CSS(Cascading Style Sheets)에 대한 비중은 점점 커져가는 요즘 CSS 전처리기(preprocessor)가 아닌 CSS 후처리기(postprocessor)인 PostCSS에 대해 글을 적어나가고자 한다. 전처리기(Pre-processor)와는 무엇이 다른가? SASS, LESS, Stylus 등의 전처리기는 CSS가 생성되기 전, 각자의 고유한 파일 확장자를 가진다. (*.scss,*.less,*.styl) 그 후 생성된 파일을 컴파일 하여 CSS로 변환시키는 형태로 진행이 된다. 예) CMD에서 SASS 파일로 CSS로 변환하는 명령어 sass --watch input.scss output.css 반면, PostCSS의 Workflow는 다음과 같은 과정을 가진다. CS.. 2020. 8. 20. 이전 1 다음 반응형