Sử dụng PostCSS cùng với Sass, Stylus hoặc LESS

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

Nếu bạn hứng thú sử dụng PostCSS, nhưng bạn vẫn yêu thích preprocessor (bộ tiền xử lý) yêu thích của mình, đừng lo lắng. Bạn không cần phải lựa chọn giữa hai thứ - bạn có thể sử dụng chúng cùng nhau.

Có một số plugin PostCSS bổ sung cho preprocessor rất tốt, khi chúng bổ sung chức năng vào quy trình làm việc của bạn mà sẽ bất khả khi hoặc khó khăn hơn khi chỉ dùng một preprocessor.

Chúng tôi sẽ đề cấp đến vài plugin miễn phí, sau đó chúng ta sẽ hướng dẫn thiết lập để cho bạn thấy cách sử dụng PostCSS cùng chung với Sass, Stylus hoặc LESS.

Tại sao nên sử dụng cả hai?

Trước khi chúng ta tìm hiểu cách bạn có thể sử dụng các preprocessor cùng với PostCSS, chúng ta sẽ nói một chút về lý do bạn muốn dùng nói. Câu trả lời ngắn gọn: để truy cập vào các plugin PostCSS có chức năng bổ sung các preprocessor. Để cho bạn thấy lý do tại sao những điều này đáng giá, chúng ta sẽ xem xét một số plugin thực sự hoạt động tốt với các preprocessor.

Lưu ý: có thể đạt được kết quả cuối cùng tương tự bằng cách sử dụng mixin và hàm trong code của preprocessor thông thường, nhưng với mỗi ví dụ bên dưới, quy trình được tự động xử lý. Bạn viết CSS của bạn bình thường và các plugin quản lý mọi thứ cho bạn, không có hàm để gọi, không kèm mixins, hoặc không có đối số được truyền vào.

autoprefixer

Đã có nhiều preprocessor mixin được viết để xử lý việc chèn prefix của các vendor. Ví dụ: bạn có thể đã sử dụng @include box-sizing (border-box); từ thư viện Compass để xuất ra các quy tắc box-sizing của vendor.

Rắc rối với việc dựa vào mixins của prefix từ vendor là:

Trước tiên, bạn phải biết về một thuộc tính cần có prefix trước khi bạn có thể quyết định triển khai mixin cho nó.
Bạn phải biết tên của mixin liên quan và cách sử dụng nó.
Bạn phải duy trì các tab khi prefix của nhà cung cấp không còn cần thiết cho mỗi thuộc tính (tôi biết tôi đã prefix box-sizing theo cách dài dòng...)

Autoprefixer loại bỏ những mối quan tâm này bằng cách xử lý quá trình tự động tạo prefix của vendor. Autoprefixer quét CSS của bạn, kiểm tra nó với dữ liệu từ CanIUse.com, sau đó thêm các prefix được yêu cầu.

Đọc thêm về Autoprefixer tại: https://github.com/postcss/autoprefixer

rtlcss

Việc tạo cả hai stylesheet RTL (từ phải sang trái) và mặc định từ một nguồn riêng lẻ cũng đã được thực hiện với các preprocessor, tuy nhiên nó thường yêu cầu sử dụng một số mixin và/hoặc biến nội suy vào mã của bạn ở một vài nơi. Ví dụ, thay vì viết margin-left:1rem; bạn có thể cần phải viết margin-#{dir}: 1rem; hoặc @include margin-left( 1rem );.

Tuy nhiên, với plugin rtlcss của Mohammad Younes, bạn không cần sử dụng mixin hoặc nội suy biến, bạn chỉ cần viết stylesheet như bình thường và plugin sẽ tìm tất cả các giá trị hoặc “right” hoặc “left” và hoán đổi chúng. Vì vậy, margin-left: 1rem; tự động trở thành margin-right:1rem; mà không cần phải viết bất kỳ mã đặc biệt nào để thực hiện điều này.

Đọc thêm về rtlcss tại: https://github.com/MohammadYounes/rtlcss

postcss-colorblind

Với plugin postcss-colorblind của Brian Holt, bạn có thể tự động tạo ra các phiên bản khác nhau của stylesheet để mang đến cho bạn trải nghiệm trực tiếp về thiết kế của bạn đối với người bị mù màu. Nó có thể mô phỏng tám kiểu mù màu khác nhau, giúp bạn có cơ sở vững chắc về việc mức độ truy xuất các màu của bạn.

Đây là một ví dụ về chức năng mà bạn thực sự phải đi đến PostCSS để tìm, vì nó sẽ rất khó khăn cho các preprocessor thực hiện.

Đọc thêm về postcss-colorblind tại: https://github.com/btholt/postcss-colorblind

postcss-svgo

Plugin postcss-svgo của Ben Briggs có thể cho phép bạn tự do tối ưu của inline code SVG. Ví dụ:

background: url('data:image/svg+xml;utf-8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"><circle cx="50" cy="50" r="40" fill="yellow" /></svg>');

Điều quan trọng nhất là code ít hơn một nửa.

1	background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="#ff0"/></svg>');

Đọc thêm về postcss-svgo tại: https://github.com/ben-eb/postcss-svgo

cssnano

Trong khi các preprocessor có thể loại bỏ whitespace (khoảng trắng) và comment (nhận xét), package cssnano của Ben Briggs có thể triển khai tất cả các kiểu tối ưu hóa ở trên và hơn cả hai bước này. Chúng tôi trình bày chi tiết về cssnano trong bài hướng dẫn For Minification and Optimization.

Đọc thêm về cssnano tại: https://github.com/ben-eb/cssnano

postcss-font-magician

Plugin postcss-font-magician của Jonathan Neal giúp thêm font tùy chỉnh dễ dàng như sử dụng font thông thường. Bạn không cần sử dụng bất kỳ mixin nào, chỉ cần thêm font-family như bạn thường làm:

1	body {
2	font-family: "Alice";
3	}

... và plugin sẽ xử lý toàn @font-face cho bạn:

@font-face {
   font-family: "Alice";
   font-style: normal;
   font-weight: 400;
   src: local("Alice"), local("Alice-Regular"),
        url("http://fonts.gstatic.com/s/alice/v7/sZyKh5NKrCk1xkCk_F1S8A.eot?#") format("eot"),
        url("http://fonts.gstatic.com/s/alice/v7/l5RFQT5MQiajQkFxjDLySg.woff2") format("woff2"),
        url("http://fonts.gstatic.com/s/alice/v7/_H4kMcdhHr0B8RDaQcqpTA.woff")  format("woff"),
        url("http://fonts.gstatic.com/s/alice/v7/acf9XsUhgp1k2j79ATk2cw.ttf")   format("truetype")
}

body {
  font-family: "Alice";
}

Đọc thêm về postcss-font-magician tại: https://github.com/jonathantneal/postcss-font-magician

Thiết lập dự án

Có 6 hướng dẫn cài đặt bên dưới: hướng dẫn về Gulp và Grunt cho mỗi preprocessor lớn. Không cần phải đọc tất cả sáu, bạn chỉ có thể chuyển thẳng đến hướng dẫn cho build tool và preprocessor yêu thích của bạn. Nếu bạn không chắc chắn sẽ sử dụng Gulp hay Grunt, Gulp chắc chắn là sự lựa chọn đơn giản cho hướng dẫn này.

Đối với bất kỳ hướng dẫn nào bạn theo dõi, bạn sẽ cần phải bắt đầu với một dự án Gulp hoặc Grunt mới. Bạn có thể đọc về cách thiết lập các dự án Gulp hoặc Grunt cho PostCSS trong các hướng dẫn trước

tương ứng.

Nếu bạn không muốn thiết lập thủ công dự án của mình từ đầu, bạn có thể tải xuống các file nguồn được đính kèm với hướng dẫn này và trích xuất dự án khởi động Gulp hoặc Grunt được cung cấp vào thư mục dự án mới. Sau đó, ở thư mục của terminal hoặc command prompt, chạy lệnh npm install.

Cài đặt PostCSS Plugins vào dự án của bạn

Sau khi bạn thiết lập một dự án mới cho một trong các phần bên dưới, bạn cũng cần phải cài đặt hai plugin PostCSS: Autoprefixer và cssnano. Bạn có thể làm vậy bằng cách chạy lệnh:

1	npm install autoprefixer cssnano --save-dev

Chúng tôi sẽ sử dụng hai plugin này để kiểm tra liệu PostCSS đó và preprocessor của bạn đang làm việc cùng nhau như mong đợi.

Xử lý trước PostCSS

Quy tắc đầu tiên của việc sử dụng một preprocessor với PostCSS là bạn nên luôn chạy preprocessor trước tiên. Lý do là vì bạn không bất kỳ cú pháp đặc trưng của preprocessor trong code của bạn làm đình trệ plugin PostCSS, và bạn cũng không muốn PostCSS thay đổi code của bạn, điều này có thể ngăn cản preprocessor hoạt động như ý bạn.

PlugCSS PostCSS và "PostCSS Test Code"

Đối với mỗi preprocessor được thiết lập, chúng ta sẽ yêu cầu chúng chạy autoprefixer và cssnano sau khi preprocessor đã hoàn thành quá trình biên dịch. Trong từng trường hợp, chúng ta sẽ cần phải thêm một số test code để 2 plugin này hoạt động.

Để lưu việc lặp lại cùng code trong từng phần bên dưới, khi bạn thấy hướng dẫn yêu cầu bạn thêm PostCSS test code của mình, vui lòng thêm code này vào file nguồn preprocessor mà bạn đang làm việc:

.css_nano, .css_nano + p, [class*="css_nano"], .css_nano {
    /* cssnano will remove this comment */
  display: flex;
	font-weight: normal;
	margin-top: 1rem;
	margin-bottom: 2rem;
	margin-left: 1.5rem;
	margin-right: 2.5rem;
	font-weight: normal;
	padding: 1.75rem;
	width: calc(50rem - (2 * 1.75rem));
}

Nếu thành công, code được biên dịch của bạn sẽ trong mỗi trường hợp xuất hiện dưới dạng:

1	.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

Lưu ý: việc sử dụng flexbox đã được autoprefix, và cssnano đã thực hiện tối ưu hóa code. Chúng tôi đang sử dụng cùng một mã để kiểm tra cssnano như chúng ta đã làm trong hướng dẫn For Minification and Optimization trước đây, vì vậy vui lòng tham khảo phần “cssnano” trong đó để biết chi tiết về việc tối ưu hóa được thực hiện.

1. Sass + PostCSS

Vì bạn đã làm việc với Node.js để chạy Gulp hoặc Grunt và PostCSS, cách dễ nhất để sử dụng Sass cùng với chúng là thông qua LibSass. Thư viện này cũng nhanh hơn đáng kể so với Ruby Sass. Chúng tôi sẽ triển khai LibSass thông qua các module gulp-sass hoặc grunt-contrib-sass.

Thiết lập thông qua Gulp

Cài đặt module gulp-sass vào dự án của bạn với npm install gulp-sass --save-dev.

Bây giờ bạn có thể cập nhật Gulpfile của bạn như sau:

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

var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var processors = [
		autoprefixer,
		cssnano
	];
	return gulp.src('./src/*.scss')
		.pipe(sass().on('error', sass.logError))
		.pipe(postcss(processors))
		.pipe(gulp.dest('./dest'));
});

Hãy chia nhỏ những gì chúng ta đã thay đổi từ Gulpfile starter mặc định:

Đã thêm các biến để tải gulp-sass, autoprefixer và cssnano
Đã thêm biến autoprefixer và cssnano vào array processors.
Đã chỉnh sửa tiện ích mở rộng file trên file nguồn mà chúng ta đang biên dịch thành “.scss” thay vì “.css”
Đã bổ sung dòng pipe() mới, .pipe(sass()..., để xử lý Sass, hãy chắc chắn chèn nó trước dòng xử lý PostCSS

Bây giờ chúng ta có thể chạy một số thử nghiệm để đảm bảo cả Sass và PostCSS đang biên dịch như mong đợi.

Kiểm tra preprocessor

Đổi tên file “src/style.css” hiện có của bạn thành “src/style.scss” và thêm test code sau vào nó:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Chạy gulp css và bạn sẽ thấy một file “style.css” mới xuất hiện trong thư mục “dest” của bạn với nội dung:

1	body {
2	font: 100% Helvetica, sans-serif;
3	color: #333; }

Kiểm tra PostCSS

Bây giờ, hãy thêm test code PostCSS đã cung cấp trước đó trong hướng dẫn này vào file “style.scss” của bạn.

Chạy lệnh gulp css của bạn và bạn sẽ thấy code chính xác xuất hiện trong file “dest/style.css” của bạn:

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

Thiết lập thông qua Grunt

Vào dự án Grunt mới của bạn, cài đặt module grunt-contrib-sass với npm install grunt-contrib-sass.

Sau đó, thêm hàm grunt.loadNpmTasks() vào bên dưới hàm hiện bạn đang có trong PostCSS:

1	grunt.loadNpmTasks('grunt-postcss');
2	grunt.loadNpmTasks('grunt-contrib-sass');

Bây giờ bạn sẽ cần phải thiết lập một tác vụ mới để xử lý Sass. Sau dòng này:

1	grunt.initConfig({

...nhưng trước tác vụ postcs hiện có, hãy bổ sung code này:

    sass: {
      dist: {
        files: {
          'src/style.css': 'src/style.scss'
        }
      }
    },

Bây giờ chúng ta sẽ đăng ký một tác vụ sẽ chạy Sass và sau đó là PostCSS. Sau hàm grunt.loadNpmTasks() bạn vừa chèn vào, hãy thêm:

1	grunt.registerTask('css', ['sass', 'postcss']);

Kiểm tra preprocessor

Để kiểm tra thiết lập của bạn, hãy đổi tên file “src/style.css” hiện có của bạn thành “style.scss”. Thêm code Sass này vào:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Chạy lệnh grunt css và bạn sẽ thấy một file mới được tạo trong thư mục “dest” của bạn có tên “style.css” và chứa mã này:

1	body {
2	font: 100% Helvetica, sans-serif;
3	color: #333; }

Thiết lập PostCSS

Bây giờ chúng ta sẽ chạy plugin Autoprefixer và cssnano của chúng ta. Cập nhật processors của Gruntfile thành mảng sau:

1	processors: [
2	require('autoprefixer')(),
3	require('cssnano')()
4	]

Kiểm tra PostCSS

Thêm code kiểm tra PostCSS vào file “style.scss” của bạn, chạy lệnh grunt css lần nữa và bạn sẽ thấy file “dest/style.css” được biên dịch lại của bạn, bây giờ chứa code tự được thêm prefix và được tối ưu hóa chính xác.

2. Stylus + PostCSS

Stylus và PostCSS làm việc đặc biệt tốt với nhau nhờ vào package PostStylus của Sean King, kết hợp việc xử lý cả Stylus và PostCSS. Nếu bạn là nhà phát triển Stylus, bạn chỉ có thể bổ sung PostStylus vào quy trình biên dịch của mình và ngay lập tức có quyền truy cập bằng cách sử dụng các plugin PostCSS thành một phần của quy trình làm việc của bạn.

PostStylus: https://github.com/seaneking/poststylus

Thiết lập thông qua Gulp

Nếu bạn đang sử dụng Gulpfile được tạo sẵn từ dự án khởi động, bạn sẽ lưu ý là sử dụng plugin gulp-postcss. Điều này thực sự chỉ có khi cần thiết cho quá trình thiết lập Sass và LESS, nhưng đối với Stylus, chúng ta sẽ không cần nó vì chúng ta đang sử dụng PostStylus làm trình biên dịch.

Bạn có thể gỡ bỏ nó khỏi dự án của bạn với npm uninstall gulp-postcss --save-dev, và xóa dòng này khỏi Gulpfile của bạn:

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

Bây giờ chúng ta có thể cài đặt hai plugin chúng ta cần cho việc biên dịch Stylus và PostCSS, bằng cách chạy lệnh:

1	npm install gulp-stylus poststylus --save-dev

Cập nhật Gulpfile của bạn:

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var poststylus = require('poststylus');

var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var processors = [
		autoprefixer,
		cssnano
	];
	return gulp.src('./src/*.styl')
		.pipe(stylus({
			use: [
				poststylus(processors)
			]
		}))
		.pipe(gulp.dest('./dest'));
});

Dưới đây là những gì chúng ta đã thực hiện ở trên:

Đã thêm các biến để tải gulp-stylus, poststylus, autoprefixer và cssnano
Đã thêm biến autoprefixer và cssnano vào array processors.
Đã chỉnh sửa extension file trên file nguồn mà chúng ta đang biên dịch thành “.styl” thay vì “.css”
Đã xóa dòng .pipe() để đọc .pipe(postcss(processors))
Thay thế nó bằng .pipe(stylus({..., để thiết lập các module gulp-stylus và poststylus để xử lý biên dịch của chúng ta

Kiểm tra preprocessor.

Bây giờ chúng ta đã sẵn sàng để thử nghiệm phần biên dịch Trong thư mục “src” của bạn, đổi tên “style.css” thành “style.styl” và thêm code Stylus này:

$font-stack = Helvetica, sans-serif
$primary-color = #333

body
  font: 100% $font-stack
  color: $primary-color

Chạy lệnh gulp css và bạn sẽ thấy một file “style.css” xuất hiện trong thư mục “dest” của bạn với nội dung này:

1	body {
2	font: 100% Helvetica, sans-serif;
3	color: #333;
4	}

Kiểm tra PostCSS

Bổ sung code kiểm tra PostCSS được cung cấp trước đó vào file “style.styl” của bạn, bảo đảm tab indent cho phần code, không phải khoảng trắng.

Biên dịch lại và kiểm tra xem bạn có kết quả thích hợp trong file "dest/style.css" của bạn hay không.

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

Thiết lập qua Grunt

Như với dự án Gulp cho Stylus, trình biên dịch mặc định PostCSS kèm với dự án khởi động là không cần thiết, chỉ tồn tại hoàn toàn cho các quá trình thiết lập của Sass và LESS. Bạn có thể gỡ bỏ nó khỏi dự án của bạn với npm uninstall grunt-postcss --save-dev.

Bây giờ chúng ta có thể cài đặt grunt-contrib-stylus và poststylus bằng lệnh:

1	npm install grunt-contrib-stylus poststylus --save-dev

Chúng tôi sẽ không còn sử dụng các post-grunt nữa, vì vậy hãy tìm dòng này:

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

Và thay thế bằng:

1	grunt.loadNpmTasks('grunt-contrib-stylus');

Do chúng ta không sử dụng các post-grunt, điều đó có nghĩa là chúng ta sẽ không còn cần postcss mà chúng ta đã xác định bên trong grunt.initConfig({...});. Xóa cấu hình tác vụ đó và thay thế bằng tác vụ stylus mới này:

    stylus: {
      compile: {
        options: {
        },
        files: {
          'dest/style.css': 'src/style.styl'
        }
      }
    }

Kiểm tra preprocessor

Bây giờ chúng ta đã sẵn sàng để thử nghiệm phần biên dịch. Trong thư mục “src” của bạn, đổi tên “style.css” thành “style.styl” và thêm code Stylus này:

$font-stack = Helvetica, sans-serif
$primary-color = #333

body
  font: 100% $font-stack
  color: $primary-color

Chạy lệnh grunt stylus và bạn sẽ thấy một file “style.css” xuất hiện trong thư mục “dest” của bạn với nội dung này:

1	body{font:100% Helvetica,sans-serif;color:#333}

Thiết lập PostCSS

Để thêm các plugin PostCSS của chúng ta vào quá trình biên dịch, trước tiên chúng ta cần bổ sung code này vào trên cùng của Gruntfile, phía trên dòng module.exports...:

1	var poststylus = function() {
2	return require('poststylus')(['autoprefixer', 'cssnano'])
3	};

Đây là nơi bạn sẽ tải bất kỳ plugin PostCSS nào bạn muốn sử dụng, thay vì trong một array processors như bạn sẽ dùng như các hướng dẫn khác.

Sau đó tìm đối tượng options bên trong tác vụ stylus và cập nhật nó thành các mục sau:

1	options: {
2	use: [poststylus]
3	},

Điều này cho grunt-contrib-stylus biết để sử dụng poststylus trong quá trình biên dịch và các plugin của nó cùng với nó.

Kiểm tra PostCSS

Thêm “test code PostCSS” vào file “src/style.styl” của bạn, chạy grunt stylus và bạn sẽ thấy nội dung sau được ghi vào file “dest/style.css” của bạn:

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

3. LESS + PostCSS

Thiết lập thông qua Gulp

Cài đặt module gulp-less vào dự án của bạn với npm install gulp-less --save-dev.

Bây giờ bạn có thể cập nhật Gulpfile của bạn như sau:

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

var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var processors = [
		autoprefixer,
		cssnano
	];
	return gulp.src('./src/*.less')
		.pipe(less())
		.pipe(postcss(processors))
		.pipe(gulp.dest('./dest'));
});

Hãy chia nhỏ những gì chúng ta đã thay đổi từ Gulpfile mặc định ban đầu:

Đã thêm các biến để tải gulp-less, autoprefixer và cssnano
Đã thêm biến autoprefixer và cssnano vào array processors
Đã chỉnh sửa tiện ích mở rộng file trên file nguồn mà chúng ta đang biên dịch thành “.less” thay vì “.css”
Đã thêm .pipe (less()) để xử lý LESS, hãy chắc chắn đặt nó trước khi dòng xử lý PostCSS

Kiểm tra preprocessor

Bây giờ chúng ta có thể chạy một số thử nghiệm để đảm bảo cả LESS và PostCSS đều được biên dịch như mong đợi.

Đổi tên file “src/style.css” hiện có thành “src/style.less” và thêm test code sau vào nó:

@font-stack: Helvetica, sans-serif;
@primary-color: #333;

body {
  font: 100% @font-stack;
  color: @primary-color;
}

Chạy gulp css và bạn sẽ thấy một file “style.css” mới xuất hiện trong thư mục “dest” của bạn với nội dung:

1	body{font:100% Helvetica,sans-serif;color:#333}

Kiểm tra PostCSS

Bây giờ, để file “style.less” của bạn thêm test code PostCSS được cung cấp trước đó trong hướng dẫn này.

Chạy lệnh gulp css của bạn và bạn sẽ thấy code đúng xuất hiện trong file "dest/style.css" của bạn.

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

Thiết lập thông qua Grunt

Vào dự án Grunt mới của bạn, cài đặt module grunt-contrib-less với npm install grunt-contrib-less, sau đó thêm một hàm grunt.loadNpmTasks() cho nó dưới cái hiện có mà bạn có cho PostCSS:

1	grunt.loadNpmTasks('grunt-postcss');
2	grunt.loadNpmTasks('grunt-contrib-less');

Bây giờ bạn sẽ cần phải thiết lập một tác vụ mới để xử lý LESS. Sau dòng này:

1	grunt.initConfig({

...nhưng trước tác vụ postcss hiện có, hãy bổ sung code này:

    less: {
      production: {
        files: {
          'src/style.css': 'src/style.less'
        }
      }
    },

Bây giờ chúng ta sẽ đăng ký một tác vụ, để chạy LESS và sau đó là PostCSS. Sau hàm grunt.loadNpmTasks() bạn vừa thêm vào, hãy thêm:

1	grunt.registerTask('css', ['less', 'postcss']);

Kiểm tra preprocessor

Để kiểm tra thiết lập của bạn, hãy đổi tên file “src/style.css” “style.less”. Thêm code LESS này vào:

@font-stack: Helvetica, sans-serif;
@primary-color: #333;

body {
  font: 100% @font-stack;
  color: @primary-color;
}

Chạy lệnh grunt css và bạn sẽ thấy một file mới được tạo trong thư mục “dest” của bạn có tên “style.css” và chứa code này:

1	body {
2	font: 100% Helvetica, sans-serif;
3	color: #333333;
4	}

Thiết lập PostCSS

Bây giờ, chúng ta sẽ thêm các plugin PostCSS của chúng ta vào quá trình biên dịch. Cập nhật các processors của Gruntfile thành mảng sau:

1	processors: [
2	require('autoprefixer')(),
3	require('cssnano')()
4	]

Kiểm tra PostCSS

Thêm test code PostCSS vào file “style.less” của bạn, chạy lệnh grunt css lần nữa và bạn sẽ thấy file “dest/style.css” được biên dịch lại của bạn bây giờ chứa mã autoprefixed và được tối ưu hóa chính xác:

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

Trong Hướng dẫn tiếp theo

Tiếp theo, chúng ta sẽ xem xét điều gì đó mà bạn có thể xem xét một loại tiền xử lý khác - sử dụng PostCSS cho các class CSS tuân thủ BEM/SUIT được tạo tự động. Quá trình này làm cho việc phát triển BEM/SUIT dễ theo dõi hơn nhiều, chưa kể là hiệu quả hơn.

Hẹn gặp các bạn trong hướng dẫn tiếp theo!