Hướng dẫn postcss là gì

Sự phát triển của CSS giống như tất cả các ngôn ngữ khác, nó làm một quá trình lặp đi lặp lại. Với mỗi bản phát hành chính, chúng ta sẽ nhận được các tính năng và cú pháp mới để giúp cho việc style được dễ dàng hơn và linh hoạt hơn.

Cũng giống như các công cụ tiền sử lý CSS được liệt kê ở trên, PostCSS cũng là một công cụ tiền sử lý, nhưng nó linh hoạt và mạnh mẽ hơn Sass hay Less ở chỗ nó có thể hỗ trợ chúng ta tạo các plugin và sử dụng lại plugin của người khác. Tức là chúng ta có thể sử dụng CSS theo dạng module. Với postCSS bạn có thể dễ dàng lựa chọn Prepocessor bạn muốn sử dụng trong dự án là gì, dễ dàng import những plugin từ cộng đồng bằng cách include nó trong các tác vụ

Một vì dụ về tính năng này là plugin PostCSSFontPath.

Nếu bạn sử dụng Sass, trước tiên bạn cần phải tạo 1 mixin để tạo font-face

@mixin importfont($font-family, $font-filename, $font-weight : normal, $font-style :normal, $font-stretch : normal) {
  @font-face {
    font-family: '#{$font-family}';
    src: url('#{$font-filename}.eot');
    src: url('#{$font-filename}.woff') format('woff'),
    url('#{$font-filename}.ttf') format('truetype');
    font-weight: $font-weight;
    font-style: $font-style;
    font-stretch: $font-stretch;
  }
}

sau đó gọi nó đế sử dụng

@include importfont('mission script', 'fonts/mission-script-webfont', 300);

Nhưng nếu sử dụng plugin  PostCSSFontPath, bạn không phải tạo lại mixin như ở trên, bạn chỉ cần viết như sau:

@font-face {
  font-family: 'My Font';
  font-path: '/path/to/font/file';
  font-weight: normal;
  font-style: normal;
}

Nó sẽ tự động in ra như sau:

@font-face {
  font-family: 'My Font';
  src: url("/path/to/font/file.eot") format('embedded-opentype'),
       url("/path/to/font/file.woff2") format('woff2'),
       url("/path/to/font/file.woff") format('woff'),
       url("/path/to/font/file.ttf") format('truetype'),
       url("/path/to/font/file.otf") format('opentype'),
       url("/path/to/font/file.svg") format('svg');
  font-weight: normal;
  font-style: normal;
}

Thật là tuyệt vời và tiện lợi phải không?

Hiện tại, đang có rất nhiều plugin của PostCSS mà bạn có thể tự tìm hiểu thêm tại link này: https://www.postcss.parts/. Bạn hoàn toàn có thể tự tạo plugin riêng của mình và đóng góp ngược lại cho cộng đồng front-end.

Làm thế nào để tích hợp PostCSS

Vì PostCSS được viết bằng JavaScript, nên chúng ta có thể sử dụng các trình chạy tác vụ như Gulp và Grunt để chuyển đổi CSS. Việc sử dụng Gulp hay Grunt đấy là do tùy thích của các bạn, nhưng mình quen sử dụng Gulp nên những gì mình đề cập tới đây là liên quan đến Gulp :D

Cài đặt PostCSS với Gulp

Để cài đặt module PostCSS, chỉ cần chạy câu lệnh

npm i gulp-postcss -D

Gọi và sử dụng postcss trong file

@include importfont('mission script', 'fonts/mission-script-webfont', 300);

var postcss = require('gulp-postcss');

gulp.task('styles', function () {
    return gulp.src('path/to/dev/style.css')
        .pipe(postcss([]))
        .pipe(gulp.dest(path/to/prod))
});

Lúc này, để biên dịch css, ta chỉ cần chạy

gulp styles

Cài đặt plugin

Nếu bạn chỉ sử dụng PostCSS giống như 1 công cụ để biên dịch CSS thì thật lãng phí, vì sức mạnh thực sự của PostCSS nằm trong các plugin. Bạn có thể theo dõi danh sách cụ thể các plugin của PostCSS tại link này: https://github.com/postcss/postcss#plugins. Giống như các gói NPM, các plugin của PostCSS có thể dễ dàng được cài đặt thông qua dòng lệnh.

Ví dụ về plugin focus

npm i postcss-focus -D

Lúc này, để sử dụng nó bạn chỉ cần sửa đổi trong file

@include importfont('mission script', 'fonts/mission-script-webfont', 300);

var processorArray = [
    require('postcss-plugin')()
];

gulp.task('styles', function () {
    gulp.src('path/to/dev/style.css')
        .pipe(postcss(processorArray))
        .pipe(gulp.dest('path/to/prod'))
});

Lúc này, khi bạn viết 

*:focus {
    outline: 0;
}
.button:hover {
    background: red;
}

.a:hover, .b:hover {
    outline: 0;
}
.b:focus {
    background: red;
}

Nó sẽ tự động cho ra:

@include importfont('mission script', 'fonts/mission-script-webfont', 300);

autoprefix

Cài đặt

@include importfont('mission script', 'fonts/mission-script-webfont', 300);

Cách dùng:

@include importfont('mission script', 'fonts/mission-script-webfont', 300);

Lúc này, khi bạn viết

@include importfont('mission script', 'fonts/mission-script-webfont', 300);

nó sẽ tự động thành

@include importfont('mission script', 'fonts/mission-script-webfont', 300);

Biên dịch SASS

Trên thực tế thì đây không phải là biên dịch SASS sang CSS, mà đây là cách viết CSS sử dụng cú pháp của SASS để có thể sử dụng biến, cách viết lồng bộ chọn và include. Lúc này bạn cần phải sử dụng 1 plugin tên là PreCSS. Lúc này, bạn hoàn toàn có thể sử dụng lại nội dung của file SCSS của bạn, nhưng cần phải chuyển đổi đuôi .scss sang .css

Cài đặt

@include importfont('mission script', 'fonts/mission-script-webfont', 300);

@include importfont('mission script', 'fonts/mission-script-webfont', 300);

Lúc này bạn có thể viết CSS như cách viết của SASS/SCSS

@include importfont('mission script', 'fonts/mission-script-webfont', 300);

sẽ cho ra

@include importfont('mission script', 'fonts/mission-script-webfont', 300);

Điều này có ý nghĩa gì?

Với việc sử dụng PostCSS, càng ngày việc viết CSS càng trở lên thú vị, có tính hướng đối tượng và mang tính "lập trình" hơn. CSS có thể được module hóa, việc xây dựng, quản lý code của bạn sẽ được tối ưu, dễ dàng và linh hoạt hơn. Hãy sử dụng PostCSS càng sớm càng tốt, vì nó là một dự án cộng đồng, hệ sinh thái sẽ chỉ phát triển nếu nhưmoij người sử dụng nó và tạo ra các plugin.