Tạo CSS Image Sprite với Compass

CSS Image Sprite là phương pháp kết hợp nhiều ảnh nhỏ thành một ảnh lớn duy nhất để giảm yêu cầu HTTP và tối ưu hóa hiệu suất tải web. Có nhiều cách và công cụ tiện dụng để làm điều này hoặc nếu không bạn cũng có thể làm điều đó theo truyền thống với Photoshop. Bài viết hôm nay sẽ hướng dẫn bạn về cách xử lý CSS Image Sprite bằng Compass. Bắt đầu thôi!

Nội dung chính

1. Cài đặt Ruby
2. Cài đặt Compass Style
3. Tạo folder để ghép ảnh
4. Cách sử dụng
5. Option

1. Cài đặt Ruby


Compass runs on any computer that has ruby installed.

Vì Compass chỉ chạy được trên máy tính đã cài Ruby nên bước đầu chúng ta phải cài đặt nó trước.
Vào http://www.ruby-lang.org/vi/downloads/ và lựa chọn cách cài đặt tùy theo hệ điều hành bạn đang sử dụng.
Ví dụ máy mình là win 64 bit thì vào link https://rubyinstaller.org/downloads/ và chọn vào Ruby+Devkit 2.6.5-1 (x64) tải về và install thôi.

2. Cài đặt Compass Style

Sau khi đã setup xong Ruby ta quay lại http://compass-style.org/install/ để đọc hướng dẫn cài đặt.


$ gem update --system
$ gem install compass

3. Tạo folder để ghép ảnh

Để tiện theo dõi thì mình tạo một New folder ở ngay desktop, vào trong folder đó và mở cmd lên chạy các dòng lệnh sau.


compass create compass-img
cd compass-img
compass watch

Tác dụng những câu lệnh trên là bảo compass tạo ra một project tên là compass-img và lắng nghe những sự thay đổi bên trong project này.
Tiếp theo chúng ta copy folder images chứa những hình ảnh muốn ghép vào trong như bên dưới.

Bên trong folder images chứa những ảnh sau.

4. Cách sử dụng

Các bạn vào trong folder sass mở file screen.scss và sửa lại code tìm đến thư mục images với phần mở rộng là các ảnh có đuôi png.


/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */

@import "../images/*.png";

Sau khi lưu lập tức Compass đã tạo ra được một ảnh đã ghép như này.

5. Option

Như bạn có thể thấy trong ảnh chụp màn hình ở trên, hình ảnh được sắp xếp theo chiều dọc mặc định. Trong trường hợp chiều dọc không phù hợp với hoàn cảnh, chúng ta có thể điều hướng chúng theo chiều ngang hoặc đường chéo với biến sau:
${path}-layout: {value} trong đó {path} là tên thư mục nơi bạn lưu hình ảnh, {value} nhận giá trị: horizontal - vertical - diagonal


$images-layout: vertical;
@import "../images/*.png";


$images-layout: horizontal;
@import "../images/*.png";


$images-layout: diagonal;
@import "../images/*.png";

Note*: Compass sẽ bị lỗi khi ghép ảnh nếu các bạn để tên ảnh có khoảng trắng, vì vậy nên đặt tên ảnh là girl_xinh.png thay vì để là girl xinh.png.

Xin cảm ơn và hẹn gặp lại các bạn trong bài viết tiếp theo.