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 -DGọi và sử dụng postcss trong file Gulpfile.js
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 stylesCà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 Gulpfile.js như sau
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:
*:focus {
outline: 0;
}
.button:hover, .button:focus {
background: red;
}
.a:hover, .b:hover, .a:focus {
outline: 0;
}
.b:focus {
background: red;
}autoprefix
Cài đặt
npm i autoprefixer -D
Cách dùng:
gulp.task('autoprefixer', () => {
const autoprefixer = require('autoprefixer')
const sourcemaps = require('gulp-sourcemaps')
const postcss = require('gulp-postcss')
return gulp.src('./src/*.css')
.pipe(sourcemaps.init())
.pipe(postcss([ autoprefixer() ]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dest'))
})Lúc này, khi bạn viết
.item {
display: flex;
flex-flow: row wrap;
}nó sẽ tự động thành
.item {
display: -webkit-flex;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}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
npm i precss -D
var processorsArray = [
require('precss')()
];Lúc này bạn có thể viết CSS như cách viết của SASS/SCSS
/*Variables*/
$blue: #0000ff;
$green: #00ff00;
$radius: 10px;
.square {
background: $blue;
border-radius: $radius;
}
/*Imports*/
@import "partials/_base.css";
/*Mixins*/
@define-mixin square $dimension {
width: $dimension;
height: $dimension;
}
/*Nesting, variables and mixins*/
.button {
@mixin square 200px;
background: $green;
&:hover {
background: $blue;
}
}sẽ cho ra
.square {
background: #0000ff;
border-radius: 10px;
}
.button {
width: 200px;
height: 200px;
background: #00ff00;
}
.button:hover {
background: #0000ff;
}Đ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.
Add new comment