() translation by (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:
1 |
/******************************************************************************
|
2 |
*
|
3 |
* Partial.
|
4 |
*
|
5 |
*****************************************************************************/
|
6 |
body { |
7 |
font-size: 100%; |
8 |
}
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
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:
1 |
/******************************************************************************
|
2 |
*
|
3 |
* Partial.
|
4 |
*
|
5 |
*****************************************************************************/
|
6 |
body { |
7 |
font-size: 100%; |
8 |
}
|
9 |
|
10 |
/******************************************************************************
|
11 |
*
|
12 |
* Partial.
|
13 |
*
|
14 |
*****************************************************************************/
|
15 |
body { |
16 |
font-size: 100%; |
17 |
}
|
18 |
|
19 |
/******************************************************************************
|
20 |
*
|
21 |
* Partial.
|
22 |
*
|
23 |
*****************************************************************************/
|
24 |
body { |
25 |
font-size: 100%; |
26 |
}
|
Nhưng giả sử bạn thật sự muốn những thứ sau đây:
1 |
/******************************************************************************
|
2 |
*
|
3 |
* Partial.
|
4 |
*
|
5 |
*****************************************************************************/
|
6 |
body { |
7 |
font-size: 100%; |
8 |
}
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
/******************************************************************************
|
16 |
*
|
17 |
* Partial.
|
18 |
*
|
19 |
*****************************************************************************/
|
20 |
body { |
21 |
font-size: 100%; |
22 |
}
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
/******************************************************************************
|
30 |
*
|
31 |
* Partial.
|
32 |
*
|
33 |
*****************************************************************************/
|
34 |
body { |
35 |
font-size: 100%; |
36 |
}
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
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:
Dòng lệnh cho Thiết kế Web: Tự động hoá Với Grunt
Khóa học Ngắn Mới: Thiết lập Một Tiến trình Phát triển Front-End Chuyên nghiệp
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:
1 |
"devDependencies": { |
2 |
"grunt": "^1.0.1", |
3 |
"grunt-replace": "^1.0.1", |
4 |
"grunt-sass": "^2.0.0", |
5 |
"load-grunt-tasks": "^3.5.2" |
6 |
}
|
Sau đó, trong tập tin grunt.js, chúng ta phải cài đặt tác vụ (task):
1 |
// Task: replace.
|
2 |
replace: { |
3 |
css: { |
4 |
options: { |
5 |
usePrefix: false, |
6 |
patterns: [ |
7 |
{
|
8 |
match: '/**/', |
9 |
replacement: '' |
10 |
}
|
11 |
]
|
12 |
},
|
13 |
files: [ |
14 |
{
|
15 |
'css/styles.css': 'css/styles.css' // for single file |
16 |
}
|
17 |
]
|
18 |
}
|
19 |
}
|
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:
1 |
match: '/**/', |
2 |
replacement: '' |
Đ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:
1 |
/******************************************************************************
|
2 |
*
|
3 |
* Partial.
|
4 |
*
|
5 |
*****************************************************************************/
|
6 |
body { |
7 |
font-size: 100%; |
8 |
}
|
9 |
/**/
|
10 |
/**/
|
11 |
/**/
|
12 |
/**/
|
13 |
/**/
|
14 |
/**/
|
15 |
/**/
|
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
