PostCSS 심층 다이빙 : 기타 유용한 정보

() translation by (you can also view the original English article)

이 시리즈 전반에 걸쳐 우리는 PostCSS 플러그인의 여러 카테고리를 통해 CSS 개발에 다양한 이점을 제공했습니다. 그러나 가장 좋은 PostCSS 플러그인 중 일부는 이전 시리즈 항목에서 다루었던 범주에 맞지 않습니다.

이 튜토리얼에서는 5가지 "잡다한 즐거움"에 대해 배웁니다. 우리는 다음을 다룰 것입니다 :

분실된 그리드 생성
postcss-colorblind를 사용하여 디자인이 사람들을 색칠하는 모습보기
postcss-pxtorem을 사용하여 px 단위를 rem으로 변환
rtlcss로 RTL 버전의 스타일 시트 자동 생성하기
postcss-style-guide를 사용하여 스타일 가이드 자동 생성

시작합시다!

프로젝트 셋업

어느 때보 다 먼저 할 일은 선호도에 따라 Gulp 또는 Grunt 중 하나를 사용하도록 프로젝트를 설정하는 것입니다. 하나 또는 둘 모두에 대한 선호도가 없다면 Gulp를 사용하는 것이 좋습니다. 왜냐하면 동일한 목적을 달성하는 데 필요한 코드가 적어지기 때문에 작업을 조금 더 간단하게 만들어야합니다.

이전 자습서에서 PostCSS 용 Gulp 또는 Grunt 프로젝트를 설정하는 방법에 대해 읽을 수 있습니다.

각기.

프로젝트를 처음부터 수동으로 설치하지 않으려면 이 자습서에 첨부된 소스 파일을 다운로드하고 제공된 Gulp 또는 Grunt 시작 프로젝트를 빈 프로젝트 폴더에 추출하십시오. 그런 다음 터미널이나 명령 프롬프트에서 폴더를 가리키면 npm install 명령을 실행합니다.

플러그인 설치

이제 5 개의 플러그인을 프로젝트에 설치해야 합니다. Gulp 또는 Grunt를 사용하든, 프로젝트 폴더에서 다음 명령을 실행하여 사용할 플러그인을 설치하십시오.

1	npm install lost postcss-colorblind postcss-pxtorem postcss-style-guide --save-dev

이 다섯 가지뿐만 아니라 rtlcss도 사용할 것입니다. 그러나 다른 PostCSS 플러그인과 조금 다르게 작동하므로 해당 Gulp 또는 Grunt 플러그인을 통해 사용할 것입니다.

Gulp를 사용하는 경우 다음 명령을 사용하여 gulp-rtlcss를 설치하십시오.

1	npm install gulp-rtlcss gulp-rename --save-dev

Grunt를 사용하는 경우 grunt-rtlcss 명령을 다음 명령으로 설치하십시오.

1	npm install grunt-rtlcss --save-dev

이제 플러그인을 프로젝트에 로드할 준비가 되었습니다.

Gulp를 통해 플러그인 로드

Gulp를 사용하는 경우 다음 변수를 파일에 이미있는 변수에 추가하십시오.

var lost = require('lost');
var colorblind = require('postcss-colorblind');
var pxtorem = require('postcss-pxtorem');
var styleGuide = require('postcss-style-guide');

var rtlcss = require('gulp-rtlcss');
var rename = require('gulp-rename');

이제 각각의 새 변수 이름을 processors 배열에 추가하십시오.

    var processors = [
  	lost,
		// colorblind,
		pxtorem,
		styleGuide
	];

참고 : colorblind는 주석으로 처리되며, 나중에 설명합니다.

gulp css 명령을 실행하여 새로운 "style.css" 파일이 프로젝트의 "dest"폴더에 나타납니다.

Grunt를 통해 플러그인 로드

Grunt를 사용하는 경우 options 개체 아래에 중첩된 processors 개체를 다음과 같이 업데이트하십시오.

        processors: [
          require('lost')(),
          // require('postcss-colorblind')(),
          require('postcss-pxtorem')(),
          require('postcss-style-guide')()
        ]

참고 : require('postcss-colorblind')(), 는 주석으로 처리되며, 나중에 설명됩니다.

grunt postcss 명령을 실행하여 새로운 "style.css" 파일이 프로젝트의 "dest"폴더에 나타납니다.

로스트 그리드 생성

Lost는 Stylus로 작성된 또 다른 매우 성공적인 그리드 시스템 인 Jeet의 창안자 인 Cory Simmons에 의한 완전히 PostCSS 기반의 그리드 생성 시스템입니다. 그것은 인상적인 기능의 긴 목록을 가지고 있지만, 배포는 매우 간단합니다.

"index.html"이라는 파일을 작성하여 시작하십시오. "dest"폴더에 저장하십시오. 이 파일에 기본 그리드 레이아웃을 설정합니다. 다음 코드를 추가하십시오.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="row">
	<div class="main"> 
		<h1>Main Area</h1>
	</div>
	<div class="sidebar">
		<h1>Sidebar</h1>
	</div>
</div>
	
</body>
</html>

그런 다음이 코드를 "src / style.css"에 추가하여 기본 영역 열과 세로 막대 열이있는 기본 두 열 격자 레이아웃을 설정합니다.

@lost gutter 1.618rem;

.row {
    lost-center: 75rem;
}

.main {
	lost-column: 3/5;
}

.sidebar {
	lost-column: 2/5;
}

우리가 여기서 한 일을 분해합시다.

먼저, @lost at-rule을 사용하여 Lost 옵션 중 하나 인 gutter 크기에 대한 자체 값을 설정합니다. 기본적으로 거터 (열 사이의 간격)는 30px입니다. 나는 항상 디자인에서 간격을 위해 1.618rem을 사용하고 싶습니다. 그래서 저는 이것을 @lost gutter 1.618rem;이라는 새로운 거터 크기로 설정했습니다.

다음으로, 열을 둘러 쌀 수있는 .row 클래스를 설정했습니다. 이 경우에는 lost-center 속성을 사용하고 행의 너비를 지정해야합니다. 플러그인은 클래스의 max-width를 설정하고 중심에두고 지우는 작업을 처리합니다.

그 후, .main과 .sidebar 클래스에서 컬럼을 생성했습니다.

분실은 12 또는 16 열과 같이 미리 정해진 수로 작업하는 것을 제한하지 않습니다. 원하는 개수의 열을 가질 수 있습니다. 열 너비는 lost-column 속성을 사용하고 분수를 값으로 설정하여 결정됩니다. 우리 코드에서 .main 클래스는 3/5의 설정을 사용하므로 5개의 열 중 3개를 차지하고 .sidebar는 2/5를 사용하므로 5개중 2개의 열을 사용합니다.

파일을 컴파일하고 "dest / style.css" 파일에 다음 코드가 표시됩니다.

.row {
    *zoom: 1;
	max-width: 75rem;
	margin-left: auto;
	margin-right: auto;
}

.row:before {
	content: '';
	display: table;
}

.row:after {
	content: '';
	display: table;
	clear: both;
}

.main {
	width: calc(99.99% * 3/5 - (1.618rem - 1.618rem * 3/5));
}

.main:nth-child(n) {
	float: left;
	margin-right: 1.618rem;
	clear: none;
}

.main:last-child {
	margin-right: 0;
}

.main:nth-child(5n) {
	margin-right: 0;
}

.main:nth-child(5n + 1) {
	clear: left;
}

.sidebar {
	width: calc(99.99% * 2/5 - (1.618rem - 1.618rem * 2/5));
}

.sidebar:nth-child(n) {
	float: left;
	margin-right: 1.618rem;
	clear: none;
}

.sidebar:last-child {
	margin-right: 0;
}

.sidebar:nth-child(5n) {
	margin-right: 0;
}

.sidebar:nth-child(5n + 1) {
	clear: left;
}

그리고 브라우저에서 볼 때 "dest / index.html" 파일은 다음과 같이 두 개의 열 레이아웃을 나타냅니다.

lost-utility: edit;를 제공하는 이유는 바로 여기 그리드에서 무슨 일이 벌어지는지를 보기가 조금 어렵습니다 그리드를 강조 표시하여 개발 중 쉽게 시각화 할 수 있습니다.

지금까지 작성한 각 클래스에 다음을 추가하십시오.

.row {
    lost-center: 75rem;
	lost-utility: edit;
}

.main {
	lost-column: 3/5;
	lost-utility: edit;
}

.sidebar {
	lost-column: 2/5;
	lost-utility: edit;
}

이제 페이지를 다시 컴파일하고 새로 고칠 때 그리드가 다음과 같이 강조 표시되어야합니다.

이 튜토리얼의 뒷부분에서 도움이 되는 추가 스타일을 사용하여 다시 한 번 더 명확하게 보도록 하겠습니다. "src / style.css"파일을 업데이트하십시오. 파일에 다음을 추가하여 열 안쪽에 패딩과 배경 및 텍스트 색상을 추가하는 등의 추가 기능을 추가합니다.

@lost gutter 1.618rem;

* {
    box-sizing: border-box;
}

html, body {
	height: 100%;
	margin: 0;
	font-family: "Open Sans";
}

html {
	padding: 0;
}

body {
	padding: 1.618rem;
	background: #16a085;
}

.row {
	lost-center: 75rem;
}

.main, .sidebar {
	padding: 1.618rem;
	min-height: 500px;
}

.main {
	lost-column: 3/5;
	background: white;
	color: #232323;
}

.sidebar {
	lost-column: 2/5;
	background: #2c3e50;
	color: white;
}

CSS를 다시 컴파일하고 페이지를 다시 로드하면 다음과 같이 고전적인 두 개의 열 레이아웃을 갖게됩니다.

여기에서 다루어진 내용은 잃어버린 부분으로 수행할 수 있는 작업의 표면을 보여주지 않으므로 나머지 기능에 대해서는 https://github.com/corysimmons/lost에서 읽으십시오.

색맹의 눈을 통해보십시오

색맹은 귀하가 느끼는 것보다 사이트 방문자의 상당 부분을 차지합니다. 예를 들어, 가장 일반적인 유형의 색맹은 모든 남성의 6%와 여성의 0.4 %에게 영향을 주는 중년 여성입니다. 관점에서 볼 때 IE9와 IE10의 결합은 모든 웹 트래픽의 약 4%가 사용하는 것으로 추산됩니다. 특정 브라우저를 지원하는데 상당한 시간을 투자 할 수 있다면 사람들을 지원하는데 평등 한 시간을 할애 할 수 있다고 제안할 수 있습니다.

Brian Holt의 postcss-colorblind 플러그인은 다양한 시각 장애인을 위한 디자인이 얼마나 접근하기 쉬운지 평가하는데 도움이됩니다. 시각적 인 인식이 동일하면 색상 체계가 어떻게 보이는지 직접 확인할 수 있습니다. 8가지 색맹을 시뮬레이트하는 스타일 시트 버전을 생성할 수 있습니다. 어떻게 사용하는지 보겠습니다.

추가 색상 추가

먼저 우리가 생성하려고하는 다른 스타일 시트의 효과를 더 분명하게 볼 수 있도록 지금까지 디자인에 약간의 색상을 추가 할 것입니다. "dest / index.htm"에 이미있는 행 아래에 다음 html을 추가하여 "metro style"타일 5개를 추가합니다. 파일:

<div class="row">
    <div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
</div>

이제 "src / style.css"에 다음 코드를 추가하십시오. 파일을 사용하여 5가지 색상으로 타일의 스타일을 지정하십시오.

.row {
    margin-bottom: 1.618rem;
}

.tile {
	lost-column: 1/5;
	padding: 3.75rem 1.618rem;
	text-align: center;
	font-size: 1.25rem;
	color: white;
}

.tile:nth-of-type(1) {
	background: #f39c12;
}

.tile:nth-of-type(2) {
	background: #c0392b;
}

.tile:nth-of-type(3) {
	background: #8e44ad;
}

.tile:nth-of-type(4) {
	background: #2980b9;
}

.tile:nth-of-type(5) {
	background: #d35400;
}

컴파일이 완료되면 브라우저에서 파일이 다음과 같이 표시됩니다.

색맹 시뮬레이션 생성

이전에 processors 배열을 설정할 때 colorblind에 대한 항목이 주석 처리되었음을 알았을 수 있습니다. 왜냐하면 플러그인이 활성화 되자마자 스타일 시트에 컬러 블라인드 시뮬레이션을 적용 할 것이기 때문입니다. 그래서 당신이 그것을 사용할 준비가 될 때까지 켜기를 원하지 않을 것입니다. 이제 processors 배열에서 주석 처리를 제거하십시오.

색맹의 여덟 가지 유형 중 하나를 시뮬레이트 하려면 체크할 색맹 유형의 이름과 함께 Gulpfile 또는 Gruntfile에 이 플러그인의 옵션 method를 전달하십시오.

예를 들어, deuteranomaly 시뮬레이션하려면 이 옵션을 설정하십시오.

/* Gulpfile */
colorblind({method: 'deuteranomaly'}),

/* Gruntfile */
require('postcss-colorblind')({method: 'deuteranomaly'})

이제 스타일 시트를 다시 컴파일하고 페이지를 새로 고침하십시오. 그러면 여러분은 중도 변경을 가진 사람으로서 디자인을 보게 될 것입니다.

색상이 눈에 띄게 달라 보입니다. 중추 신경계가 있는 사람은 빨강과 초록색이 다르게 보입니다. 파란색이 거의 똑같은 것을 알게되지만 빨강과 초록은 완전히 다릅니다.

원판 복제를 시각화하려면 이 옵션을 설정하십시오.

/* Gulpfile */
colorblind({method: 'protanopia'}),

/* Gruntfile */
require('postcss-colorblind')({method: 'protanopia'})

스타일 시트를 다시 컴파일하면 다음과 같이 표시됩니다.

본질적으로 망막증이 있는 사람은 전혀 붉은 색을 보지 못하고 녹색을 다른 방식으로 봅니다. 강한 블루스가 너무 심하게 영향을 받지는 않지만 보라색은 순수한 청색이되고, 나머지 컬러는 같은 황갈색을 띄게됩니다. 빨간색과 두 개의 주황색 타일을 서로 구별하기가 매우 어려워졌습니다.

모든 유형의 컬러 블라인드 시뮬레이션을 생성하는 이 기능은 믿기 어려울만큼 통찰력이 있으며, 선택한 색상 체계가 특정 색조의 인식에 의존하지 않고 모든 사람이 액세스 할 수 있도록 보장합니다.

postcss-colorblind에 대한 자세한 내용은 https://github.com/btholt/postcss-colorblind를 참조하십시오.

px 단위를 rem로 변환

거의 모든 디자인에서, rem 장치가 두드러진 역할을하는 매우 좋은 이유가 있습니다. 그러나 rem 단위로 생각하는 것이 어렵고 레이아웃을 만들 때 px 단위로 생각하는 것이 훨씬 쉽습니다. postcss-pxtorem 플러그인은 px 단위를 자동으로 rem 단위로 변환하여 이 speedbump를 돕습니다.

플러그인은 적용 할 흰색 속성 목록을 사용하므로 기본적으로 px 단위는 다음과 같이 사용할 때 rem으로 변환됩니다.

글꼴
글꼴 크기
라인-높이
문자 간격

prop_white_list 옵션을 설정하여 이 화이트리스트에 추가 속성을 추가 할 수 있습니다. Gulpfile 또는 Gruntfile을 업데이트하여 width 속성을 다음과 같이 추가하십시오.

/* Gulpfile */
pxtorem({
	prop_white_list: ['width', 'font', 'font-size', 'line-height', 'letter-spacing']
}),
        
/* Gruntfile */
require('postcss-pxtorem')({
	prop_white_list: ['width', 'font', 'font-size', 'line-height', 'letter-spacing']
}),

이제 "src / style.css"에 다음 코드를 추가하십시오. 파일로 변환 프로세스를 테스트 할 수 있습니다.

1	.convert_this {
2	width: 500px;
3	font-size: 18px;
4	}

파일을 컴파일하고 "dest / style.css" 이제 결과로 나온 rem 밸류를 볼 수 있습니다 :

1	.convert_this {
2	width: 31.25rem;
3	font-size: 1.125rem;
4	}

postcss-pxtorem에 대한 자세한 내용은 https://github.com/cuth/postcss-pxtorem을 참조하십시오.

스타일 시트의 RTL 버전 생성

전 세계 사용자를 대상으로 하는 경우 아랍어 및 히브리어와 같이 왼쪽에서 오른쪽으로 읽는 대신 오른쪽에서 왼쪽으로 읽는 스크립트에 대한 지원을 제공해야 할 수 있습니다. 스크립트의 방향이 바뀌면 사이트의 레이아웃도 변경되어야하므로 전체 디자인이 화면의 오른쪽을 먼저 보는 사람들에게 의미가 있습니다.

Mohammad Younes의 rtlcss 플러그인은 스타일 시트를 자동으로 스캔하여 방향을 변환하고 "왼쪽"과 "오른쪽"을 바꿀 수 있기 때문에 오른쪽에서 왼쪽으로 레이아웃을 만드는 과정을 훨씬 쉽게 만듭니다.

이 플러그인은 실제로 다른 PostCSS 플러그인과 조금 다르게 작동합니다. 우리는 그것을 우리 processors 배열에 추가 할 수 없습니다. 대신, 우리 프로젝트 설정 중에 rtlcss에 대한 Gulp 및 Grunt 플러그인을 설치했고,이를 실행하기 위해 별도의 작업을 설정하려고합니다.

Gulp를 사용하는 경우이 코드를 Gulpfile에 추가하십시오.

gulp.task('rtl', function () {
    return gulp.src('./dest/style.css')
		.pipe(rtlcss())
		.pipe(rename({ suffix: '-rtl' }))
		.pipe(gulp.dest('./dest'));
});

Grunt를 사용하는 경우 기존 grunt.loadNpmTasks 행 다음에 이 행을 추가하십시오.

1	grunt.loadNpmTasks('grunt-rtlcss');

그런 다음 postcss 작업 뒤에 쉼표 ,를 추가하고 이 새로운 rtlcss 작업에 붙여 넣으십시오.

rtlcss: {
	'default':{
		dest   : 'dest/style-rtl.css',
		src    : 'dest/style.css'
	}
}

이제 Gulp를 gulp rtl 명령으로 실행하고 Grunt를 사용하는 경우 grunt rtlcss 명령을 실행하여 "dest"폴더에 "style-rtl.css"라는 오른쪽에서 왼쪽 스타일 시트를 생성하십시오.

'dest / index.html'을 수정하십시오. 로드 할 파일 "style-rtl.css" "style.css"대신에 사이트를 새로 고침하고 레이아웃이 뒤집혀 져야합니다.

텍스트가 여전히 왼쪽으로 정렬되어 있음을 알 수 있습니다 만, 이는 텍스트 정렬을 추가하면 쉽게 해결할 수 있습니다 text-align: left; rtlcss가 text-align: right;로 변환할 기본 스타일 시트에서.

rtlcss와 Gulp and Grunt에 대한 자세한 내용은 다음을 참조하십시오.

스타일 가이드 생성

postcss-style-guide 플러그인은 Masaaki Morishita가 만든 환상적인 도구입니다. 스타일 시트를 기반으로 스타일 가이드를 자동으로 생성 할 수 있습니다. CSS에 주석을 추가하기만 하면 주석이 Markdown으로 구문 분석되고 스타일 가이드를 채우는데 사용됩니다.

우리가 할 첫 번째 일은 스타일 가이드를 위한 몇 가지 옵션을 구성하는 것입니다. 프로젝트의 이름을 설정하여 스타일 가이드의 머리글에 표시 할 수있게 할 것이고 우리는 또한 1column이라는 사용자 정의 테마를 사용할 것입니다.

프로젝트에 사용할 사용자 정의 테마를 설치하려면 다음 명령을 실행하십시오.

1	npm install psg-theme-1column --save-dev

이제 Gulpfile 또는 Gruntfile을 업데이트하여 다음과 같이 name과 theme 옵션을 전달하십시오.

/* Gulpfile */
styleGuide({
	name: 'Auto Style Guide',
	theme: '1column'
})

/* Gruntfile */
require('postcss-style-guide')({
	name: 'Auto Style Guide',
	theme: '1column'
})

postcss- 스타일 가이드가 작동하는 방식은 스타일 시트에서 여러분의 주석을 찾고 스타일 가이드 항목으로 찾은 각각의 주석을 뒤집을 것입니다. 어떤 주석은 다른 주석이나 문서의 끝까지 이어지는 CSS와 관련 있다고 가정합니다.

따라서 스타일 가이드에 표시하려는 CSS는 스타일 시트의 맨 아래로 이동해야합니다. 우리는 색칠된 타일을 스타일 가이드와 h1 요소에 표시할 것이므로 두 문서가 모두 문서 끝에 있어야 합니다.

타일을 적용한 모든 클래스를 스타일 시트의 맨 아래로 이동하여 시작하십시오. 그것은 .tile 클래스이고 다섯 개의 .tile:nth-of-type()입니다. 스타일. 그런 다음 h1 요소를 제어하는 작은 코드를 추가하여 스타일 시트의 아래쪽이 다음과 같이 보이도록 하십시오 (.tile : nth-of-type() 공간을 절약하기 위해 스타일이 표시되지 않음):

h1 { font-size: 42px; }

.tile {
	lost-column: 1/5;
	padding: 3.75rem 1.618rem;
	text-align: center;
	font-size: 1.25rem;
	color: white;
}

이제 우리는 이러한 스타일을 설명하는 몇 가지 설명을 추가할 수 있습니다. 이러한 주석에 추가 된 모든 HTML은 styleguide에서 html로 렌더링되고 주석 뒤에 나오는 CSS는 표시 상자에 나타납니다.

스타일 시트에 h1 스타일과 .tile 클래스를 설명하고 html 예제를 포함하는 몇 가지 주석을 추가하면 다음과 같이 끝납니다 :

/*
This is the h1 style

<h1>Heading 1</h1>

*/

h1 { font-size: 42px; }

/*
These use the .tile class

<div class="row">
    <div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
</div>

*/

.tile {
	lost-column: 1/5;
	padding: 3.75rem 1.618rem;
	text-align: center;
	font-size: 1.25rem;
	color: white;
}

이제 스타일 시트를 컴파일하고 프로젝트의 루트 폴더를 보고 "styleguide.html" 브라우저에서 찾을 수있는 파일 :

헤이 프레스토, 인스턴트 스타일 가이드!

지금은 스타일 시트에서 녹색 몸체 배경색을 선택했기 때문에 약간 펑키하게 보입니다. 우리가 원하는 것은 우리의 콘텐츠가 흰색 배경에 있는 것입니다. 스타일 시트에서 다른 코드를 선택하여 스타일 시트를 만들 수 있습니다.

이 스타일 가이드 템플릿의 중심 부분은 section 요소를 사용하므로 h1 요소를 설명하는 주석 위에 다음 코드를 추가하십시오.

1	section {
2	padding: 1rem;
3	background: white;
4	}

코드를 다시 컴파일하고 스타일 가이드를 새로 고치십시오. 이제 section 요소에 추가 한 스타일을 사용하고 있으며 다음과 같이 보입니다.

저기, 훨씬 좋아요.

postcss 스타일 가이드에 대한 자세한 내용은 https://github.com/morishitter/postcss-style-guide를 참조하십시오.

요약하겠습니다.

위에서 다룬 모든 것을 요약하면 다음과 같습니다.

Lost Plugin을 사용하면 몇 가지 속성만 있는 유연한 그리드를 만들 수 있으며 필요한 경우 많은 추가 기능을 사용할 수 있습니다.
postcss-colorblind 플러그인을 사용하면 8가지 유형의 색맹이 있는 사람들에게 디자인이 어떻게 보이는지 직접 볼 수 있습니다.
postcss-pxtorem 플러그인을 사용하면 px 단위를 사용하여 코드를 작성할 수 있지만 처리 중에 자동으로 rem 단위로 변환됩니다.
rtlcss 플러그인은 오른쪽에서 왼쪽 스타일 시트를 자동으로 생성합니다. 코드에서 "right"라는 단어를 검색하고 "left"로 바꾸거나 그 반대의 경우도 마찬가지입니다.
postcss-style-guide 플러그인은 스타일 시트에 추가 된 주석을 기반으로 스타일 가이드를 자동 생성합니다.

커밍 넥스트 : 나만의 플러그인 만들기

이 PostCSS Deep Dive의 다음과 마지막 설치에서는 PostCSS가 제공하는 가장 큰 장점 중 하나를 풀 수있는 방법을 배우게됩니다. 그것은 당신이 원하는 어떤 유형의 기능을 만드는데 사용하는 능력입니다.

자신 만의 기본적인 플러그인을 만드는 법을 배우게되며, 앞으로 그 필요성이 무엇이든간에 더 많은 플러그인을 만들기 위해 계속 노력할 것입니다.

마지막 튜토리얼에서 봅시다!