GALAXY TECH
Chuyên gia Công nghệ
Thứ hai, 16/01/2017 | 00:00 GMT+7

Giới thiệu về PostCSS Với cssnext và cssnano

PostCSS là một công cụ mới giúp dễ dàng phát triển các plugin JavaScript có thể chuyển đổi kiểu. Điều đó mở ra một thế giới mới về khả năng cho các plugin mới giúp làm việc với CSS đơn giản và dễ dàng hơn. Bài đăng giới thiệu hai trong số các plugin PostCSS phổ biến nhất: cssnext và cssnano .

  • cssnext cho phép bạn sử dụng tương lai của CSS ngày nay. Bạn có thể sử dụng các tính năng sắp có hoặc các tính năng không được hỗ trợ trong tất cả các trình duyệt như biến CSS và hàm màu CSS . cssnext sẽ biến đổi kiểu của bạn để chúng hoạt động trên tất cả các trình duyệt. Nói cách khác, cssnext cho phép bạn viết các kiểu của bạn bằng cú pháp CSS thực thay vì cú pháp bộ xử lý trước khác. cssnext cũng sẽ tự động thêm tiền tố của nhà cung cấp vào kiểu của bạn, vì vậy bạn không cần phải tự mình sử dụng tiền tố khi viết CSS.

Để cung cấp cho bạn một ví dụ, giả sử ta có các kiểu CSS sau:

:root {
  --text: hotpink;
  --bg-color: #F9EC31;
  --flex-center: {
    display: flex;
    margin: auto;
  }
}

.box {
  background-color: var(--bg-color);
  color: color(hotpink whiteness(25%));
  @apply(--flex-center);
}

.warn {
  @apply(--flex-center);
}

cssnext sẽ biến đổi các kiểu thành sau:

.box {
  background-color: #F9EC31;
  color: rgb(255, 64, 159);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
}

.warn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
}
  • cssnano thu nhỏ và nén CSS của bạn. Nó loại bỏ khoảng trắng, loại bỏ các luật trùng lặp, loại bỏ các tiền tố lỗi thời của nhà cung cấp, loại bỏ comment và thực hiện rất nhiều tối ưu hóa khác.

cssnext và cssnano có thể được cấu hình để hoạt động theo nhu cầu cụ thể của bạn, nhưng ở đây ta hãy chỉ trình bày cách sử dụng các giá trị mặc định. Điều này hy vọng sẽ bao gồm hầu hết các trường hợp sử dụng của bạn.

Ta cũng sẽ sử dụng PostCSS-CLI trong ví dụ này, nhưng bạn cũng có thể sử dụng PostCSS với Webpack hoặc Grunt nếu điều đó phù hợp với cách làm việc của bạn hơn.

Cài đặt PostCSS, PostCSS-CLI, cssnext & cssnano

Cài đặt PostCSS với các plugin cssnext và cssnano thông qua npm:

$ npm install --save-dev postcss postcss-cli postcss-cssnext cssnano

Hoặc thông qua Yarn:

$ yarn add postcss postcss-cli postcss-cssnext cssnano --dev

Sử dụng PostCSS-CLI

Bạn sử dụng giao diện dòng lệnh PostCSS bằng cách cung cấp các file đầu vào và kết quả và (các) plugin PostCSS để sử dụng. Xác định các plugin với cờ -sử dụng, các file kết quả với cờ -ouput và các file đầu vào chỉ đơn giản là cung cấp cuối cùng mà không cần bất kỳ lá cờ:

$ postcss --use postcss-cssnext --use cssnano --output styles-out.css styles.css

Bạn cũng có thể sử dụng PostCSS CLI ở chế độ xem để nó lắng nghe các thay đổi đối với file đầu vào của bạn:

$ postcss --use postcss-cssnext --use cssnano --output styles-out.css styles.css --watch

Bạn cũng có thể chỉ định các tùy chọn cấu hình chi tiết hơn trong file cấu hình json và chỉ định file cấu hình với cờ –config :

$ postcss --config postcss-config.json

Tệp cấu hình của bạn sẽ giống như sau:

{
  "use": ["postcss-cssnext", "cssnano"],
  "input": "styles.css",
  "output": "styles-out.css"
}

npm Script

Để làm cho quy trình làm việc của bạn dễ dàng hơn, chỉ cần cài đặt tập lệnh postcss trong file package.json của dự án:

"scripts": {
  "postcss": "postcss --use postcss-cssnext --use cssnano --output styles-out.css styles.css"
}

Bây giờ tất cả những gì bạn phải làm là chạy lệnh sau:

$ npm run postcss
Tags:

Các tin liên quan