Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sass
Webdesign

Từ Sass sang CSS: Cách Giữ lại Khoảng trắng khi Biên dịch

by
Difficulty:IntermediateLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Bạn đã bao giờ muốn giữ lại cấu trúc trực quan của các tập tin Sass của mình khi bạn biên dịch nó thành CSS, mà không làm mất đi bất kỳ khoảng trắng nào? Trong mẹo nhỏ này tôi sẽ chỉ cho bạn cách làm điều đó như thế nào!

Hãy Theo dõi Mẹo nhỏ

Mẹo nhỏ này dành cho những ai cần biên dịch Sass thành dạng "expanded". Nếu bạn biên dịch thành "compressed" hoặc "minified" thì không liên quan gì đến nhu cầu giữ lại khoảng trắng.

Vấn đề

Hãy tưởng tượng bạn có một vài phần Sass được định dạng thế này, bao gồm các xuống dòng ở bên dưới:

Biên dịch chúng như thông thường sẽ tạo ra cho bạn một kết quả tương tự như sau:

Nhưng giả sử bạn thật sự muốn những thứ sau đây:

Giải pháp

Chúng ta sẽ giải quyết mọi thứ bằng cách sử dụng một plugin cho Grunt có tên là grunt-replace. Để biết rõ về cách làm việc với Grunt, hãy xem các hướng dẫn sau đây:

Chúng ta nạp grunt-replace, cùng với một số phụ thuộc khác trong tập tin package.json của chúng ta như minh hoạ trong đoạn code dưới đây:

Sau đó, trong tập tin grunt.js, chúng ta phải cài đặt tác vụ (task):

Match (Khớp)

Chúng ta áp dụng tác vụ replace (thay thế) sau khi chúng ta biên dịch tập tin Sass của chúng ta (kiểm tra các tập tin mã nguồn để rõ hơn).

Lưu ý tùy chọn patterns, nó biểu diễn những thứ sau đây:

Điều này hướng dẫn cho Grunt đi qua tập tin được biên dịch, tìm các trường hợp /**/ và thay thế chúng bằng một chuỗi rỗng. Bây giờ tất cả những gì chúng ta cần làm là đi qua các phần của Sass, đặt những comment /**/ này ở ​​bất cứ nơi nào chúng ta thật sự muốn có khoảng trắng, và để cho Grunt làm phần việc còn lại:

Tóm tắt

Grunt-replace thật sự là một tác vụ (task) hữu ích cho việc tìm kiếm các chuỗi thông thường và thay thế chúng bằng một cái gì đó khác bất cứ khi nào bạn chạy Grunt. Trong trường hợp này, nó là công cụ hoàn hảo để ngăn khoảng trắng bị loại khỏi Sass đã được biên dịch của chúng ta. Bạn có sử dụng nó để làm những việc khác nữa không? Hãy chia sẻ với chúng tôi!

Tài nguyên Hữu ích

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.