Khi nói đến việc phát triển các ứng dụng lớn, đảm bảo tổ chức được sắp xếp trang nhã trở thành một trong những nhiệm vụ hàng đầu. Kiểm tra xem các tệp thành phần có phải là PascalCase hay không, các biến nghe có vẻ hợp lý [không có tên lạ, bạn không biết ai đang xem Github của mình] và không có quá nhiều đoạn mã/nhận xét lớn. Bạn biết bạn là ai. Những người viết “mã này xấu quá, không biết nó hoạt động nhưng tôi đã dành 5 giờ cho nó nên hãy vặn nó đi. ”
Thành thật mà nói, có bao nhiêu bạn đã từng cảm thấy như vậy trước đây?Ứng dụng lớn cũng có nghĩa là số lượng lớn kiểu dáng. Đây là nơi sử dụng Sass sẽ có lợi
Sass là một bộ tiền xử lý cho CSS. Nó cho phép bạn sử dụng các tính năng trong kiểu dáng của mình mà CSS không có [ví dụ:. lồng nhau, mà chúng tôi sẽ đề cập sau], từ đó giúp bạn viết mã DRYer. Có hai kỹ thuật được khuyến nghị để cấu trúc kiểu dáng Sass của bạn. Phương pháp Block Element Modifier[BEM] và kiến trúc 7–1. Sử dụng Sass với hai kỹ thuật này sẽ tạo ra một cơ sở mã sạch hơn, gọn gàng hơn. Chưa kể, nó làm cho ứng dụng của bạn dễ bảo trì hơn và cho phép cộng tác dễ dàng hơn giữa các nhóm
BEM là một phương pháp về cách đặt tên cho các lớp phần tử HTML. Tên lớp BEM có nghĩa là đơn giản và dễ hiểu. Tên lớp được định dạng là.
Sass/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _mixins.scss # Sass Mixins
| |– _functions.scss # Sass Functions
|
|– vendors/
| |– _icons.scss # Font-Awesome Icons
|
|– base/
| |– _reset.scss # Reset
| |– _typography.scss # Typography rules
| |– _animations.scss # Animation rules
| |– _utilities.scss # Utility rules
|
|– layout/
| |– _navigation.scss # Navigation
| |– _header.scss # Header
| |– _footer.scss # Footer
|
|– components/
| |– _buttons.scss # Buttons
| |– _card.scss # Card
| |– _form.scss # Form
|
|– pages/
| |– _home.scss # Home page style
| |– _contact.scss # Contact page style
| |– _about.scss # About page style
|
|– themes/
| |– _pink.scss # Pink theme
| |– _mint.scss # Mint theme
|
– main.scss # Main Sass input file
1 [khối công cụ sửa đổi dấu gạch ngang kép của phần tử gạch dưới]Hãy xem ví dụ này
Big Cat Refuge
- Home
- About
- Contact
Change Theme
- Block có thể được coi là “container” hoặc “parent” cho các phần tử lồng nhau/con của nó. Nó cung cấp một kết nối rõ ràng giữa các phần khối. Khối ở đây là thanh điều hướng
Sass/
2 với lớp “nav”
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _mixins.scss # Sass Mixins
| |– _functions.scss # Sass Functions
|
|– vendors/
| |– _icons.scss # Font-Awesome Icons
|
|– base/
| |– _reset.scss # Reset
| |– _typography.scss # Typography rules
| |– _animations.scss # Animation rules
| |– _utilities.scss # Utility rules
|
|– layout/
| |– _navigation.scss # Navigation
| |– _header.scss # Header
| |– _footer.scss # Footer
|
|– components/
| |– _buttons.scss # Buttons
| |– _card.scss # Card
| |– _form.scss # Form
|
|– pages/
| |– _home.scss # Home page style
| |– _contact.scss # Contact page style
| |– _about.scss # About page style
|
|– themes/
| |– _pink.scss # Pink theme
| |– _mint.scss # Mint theme
|
– main.scss # Main Sass input file - Phần tử là “con” của khối. Đây là những đứa trẻ ________ 13 ________ 14 ________ 15 ________ 16. Tên lớp là
Sass/
7,
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _mixins.scss # Sass Mixins
| |– _functions.scss # Sass Functions
|
|– vendors/
| |– _icons.scss # Font-Awesome Icons
|
|– base/
| |– _reset.scss # Reset
| |– _typography.scss # Typography rules
| |– _animations.scss # Animation rules
| |– _utilities.scss # Utility rules
|
|– layout/
| |– _navigation.scss # Navigation
| |– _header.scss # Header
| |– _footer.scss # Footer
|
|– components/
| |– _buttons.scss # Buttons
| |– _card.scss # Card
| |– _form.scss # Form
|
|– pages/
| |– _home.scss # Home page style
| |– _contact.scss # Contact page style
| |– _about.scss # About page style
|
|– themes/
| |– _pink.scss # Pink theme
| |– _mint.scss # Mint theme
|
– main.scss # Main Sass input fileSass/
0,
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _mixins.scss # Sass Mixins
| |– _functions.scss # Sass Functions
|
|– vendors/
| |– _icons.scss # Font-Awesome Icons
|
|– base/
| |– _reset.scss # Reset
| |– _typography.scss # Typography rules
| |– _animations.scss # Animation rules
| |– _utilities.scss # Utility rules
|
|– layout/
| |– _navigation.scss # Navigation
| |– _header.scss # Header
| |– _footer.scss # Footer
|
|– components/
| |– _buttons.scss # Buttons
| |– _card.scss # Card
| |– _form.scss # Form
|
|– pages/
| |– _home.scss # Home page style
| |– _contact.scss # Contact page style
| |– _about.scss # About page style
|
|– themes/
| |– _pink.scss # Pink theme
| |– _mint.scss # Mint theme
|
– main.scss # Main Sass input fileSass/
1
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _mixins.scss # Sass Mixins
| |– _functions.scss # Sass Functions
|
|– vendors/
| |– _icons.scss # Font-Awesome Icons
|
|– base/
| |– _reset.scss # Reset
| |– _typography.scss # Typography rules
| |– _animations.scss # Animation rules
| |– _utilities.scss # Utility rules
|
|– layout/
| |– _navigation.scss # Navigation
| |– _header.scss # Header
| |– _footer.scss # Footer
|
|– components/
| |– _buttons.scss # Buttons
| |– _card.scss # Card
| |– _form.scss # Form
|
|– pages/
| |– _home.scss # Home page style
| |– _contact.scss # Contact page style
| |– _about.scss # About page style
|
|– themes/
| |– _pink.scss # Pink theme
| |– _mint.scss # Mint theme
|
– main.scss # Main Sass input fileSass/
2
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _mixins.scss # Sass Mixins
| |– _functions.scss # Sass Functions
|
|– vendors/
| |– _icons.scss # Font-Awesome Icons
|
|– base/
| |– _reset.scss # Reset
| |– _typography.scss # Typography rules
| |– _animations.scss # Animation rules
| |– _utilities.scss # Utility rules
|
|– layout/
| |– _navigation.scss # Navigation
| |– _header.scss # Header
| |– _footer.scss # Footer
|
|– components/
| |– _buttons.scss # Buttons
| |– _card.scss # Card
| |– _form.scss # Form
|
|– pages/
| |– _home.scss # Home page style
| |– _contact.scss # Contact page style
| |– _about.scss # About page style
|
|– themes/
| |– _pink.scss # Pink theme
| |– _mint.scss # Mint theme
|
– main.scss # Main Sass input file - Công cụ sửa đổi mô tả sự thay đổi về hình thức hoặc hành vi của phần tử. Ở đây, nút điều hướng có một công cụ sửa đổi, đó là
Sass/
3. Tên lớp của nút là
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _mixins.scss # Sass Mixins
| |– _functions.scss # Sass Functions
|
|– vendors/
| |– _icons.scss # Font-Awesome Icons
|
|– base/
| |– _reset.scss # Reset
| |– _typography.scss # Typography rules
| |– _animations.scss # Animation rules
| |– _utilities.scss # Utility rules
|
|– layout/
| |– _navigation.scss # Navigation
| |– _header.scss # Header
| |– _footer.scss # Footer
|
|– components/
| |– _buttons.scss # Buttons
| |– _card.scss # Card
| |– _form.scss # Form
|
|– pages/
| |– _home.scss # Home page style
| |– _contact.scss # Contact page style
| |– _about.scss # About page style
|
|– themes/
| |– _pink.scss # Pink theme
| |– _mint.scss # Mint theme
|
– main.scss # Main Sass input fileSass/
2
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _mixins.scss # Sass Mixins
| |– _functions.scss # Sass Functions
|
|– vendors/
| |– _icons.scss # Font-Awesome Icons
|
|– base/
| |– _reset.scss # Reset
| |– _typography.scss # Typography rules
| |– _animations.scss # Animation rules
| |– _utilities.scss # Utility rules
|
|– layout/
| |– _navigation.scss # Navigation
| |– _header.scss # Header
| |– _footer.scss # Footer
|
|– components/
| |– _buttons.scss # Buttons
| |– _card.scss # Card
| |– _form.scss # Form
|
|– pages/
| |– _home.scss # Home page style
| |– _contact.scss # Contact page style
| |– _about.scss # About page style
|
|– themes/
| |– _pink.scss # Pink theme
| |– _mint.scss # Mint theme
|
– main.scss # Main Sass input file
BEM với Nesting
Một trong những tính năng phổ biến của Sass là lồng. BEM song hành với việc làm tổ của Sass. Nesting cho phép bạn xác định cấu trúc phân cấp của bộ chọn và đó là lối tắt để mã hóa các quy tắc tạo kiểu CSS của bạn. Nói cách khác, ít dòng mã hơn. Ví dụ
Sass/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _mixins.scss # Sass Mixins
| |– _functions.scss # Sass Functions
|
|– vendors/
| |– _icons.scss # Font-Awesome Icons
|
|– base/
| |– _reset.scss # Reset
| |– _typography.scss # Typography rules
| |– _animations.scss # Animation rules
| |– _utilities.scss # Utility rules
|
|– layout/
| |– _navigation.scss # Navigation
| |– _header.scss # Header
| |– _footer.scss # Footer
|
|– components/
| |– _buttons.scss # Buttons
| |– _card.scss # Card
| |– _form.scss # Form
|
|– pages/
| |– _home.scss # Home page style
| |– _contact.scss # Contact page style
| |– _about.scss # About page style
|
|– themes/
| |– _pink.scss # Pink theme
| |– _mint.scss # Mint theme
|
– main.scss # Main Sass input file
5 chỉ ra phần tử cha, khối, là Sass/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _mixins.scss # Sass Mixins
| |– _functions.scss # Sass Functions
|
|– vendors/
| |– _icons.scss # Font-Awesome Icons
|
|– base/
| |– _reset.scss # Reset
| |– _typography.scss # Typography rules
| |– _animations.scss # Animation rules
| |– _utilities.scss # Utility rules
|
|– layout/
| |– _navigation.scss # Navigation
| |– _header.scss # Header
| |– _footer.scss # Footer
|
|– components/
| |– _buttons.scss # Buttons
| |– _card.scss # Card
| |– _form.scss # Form
|
|– pages/
| |– _home.scss # Home page style
| |– _contact.scss # Contact page style
| |– _about.scss # About page style
|
|– themes/
| |– _pink.scss # Pink theme
| |– _mint.scss # Mint theme
|
– main.scss # Main Sass input file
6. Trong CSS, mã sẽ giống nhưBạn có nhận thấy cách Sass ít lặp lại hơn không?
7–1 Kiến trúcMột cách phổ biến khác để cấu trúc các ứng dụng Sass là sử dụng kiến trúc 7–1. Mẫu 7–1 chỉ ra rằng chúng tôi tạo 7 thư mục và 1 tệp Sass chính nơi chúng tôi nhập tất cả các tệp từ 7 thư mục này. Kỹ thuật này thường được sử dụng cho các dự án lớn với nhiều trang. Hãy xem cấu trúc ví dụ này
Sass/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _mixins.scss # Sass Mixins
| |– _functions.scss # Sass Functions
|
|– vendors/
| |– _icons.scss # Font-Awesome Icons
|
|– base/
| |– _reset.scss # Reset
| |– _typography.scss # Typography rules
| |– _animations.scss # Animation rules
| |– _utilities.scss # Utility rules
|
|– layout/
| |– _navigation.scss # Navigation
| |– _header.scss # Header
| |– _footer.scss # Footer
|
|– components/
| |– _buttons.scss # Buttons
| |– _card.scss # Card
| |– _form.scss # Form
|
|– pages/
| |– _home.scss # Home page style
| |– _contact.scss # Contact page style
| |– _about.scss # About page style
|
|– themes/
| |– _pink.scss # Pink theme
| |– _mint.scss # Mint theme
|
– main.scss # Main Sass input file
Như bạn có thể thấy, chúng tôi có 7 thư mục ở đây và 1 thư mục chính. scss tất cả trong thư mục Sass mẹ. Ghi chú. Bạn KHÔNG cần chính xác 7 thư mục. Bạn có thể có ít hơn
Lưu ý các dấu gạch dưới hàng đầu trong tên tệp. Những tập tin này được gọi là partials. Partials là các tệp nhỏ của đoạn mã Sass. Dấu gạch dưới chỉ ra rằng tệp là một phần và nó không nên được biên dịch thành CSS. Mục đích của partials là để tránh có một tệp CSS cực lớn với tất cả kiểu dáng của ứng dụng. Điều này có thể khó đọc qua và duy trì
Nhập một phần vào chính. scss
trong chính. scss, chúng tôi nhập tất cả các phần. Vấn đề đặt hàng. Thứ tự nhập của bạn là thứ tự mà Sass sẽ tuân theo trong quá trình xử lý. Nguyên tắc chung là có tất cả các tệp "logic" [mixin, biến, hàm] ở trên cùng. chính. tệp scss sẽ trông như thế này
Sass/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _mixins.scss # Sass Mixins
| |– _functions.scss # Sass Functions
|
|– vendors/
| |– _icons.scss # Font-Awesome Icons
|
|– base/
| |– _reset.scss # Reset
| |– _typography.scss # Typography rules
| |– _animations.scss # Animation rules
| |– _utilities.scss # Utility rules
|
|– layout/
| |– _navigation.scss # Navigation
| |– _header.scss # Header
| |– _footer.scss # Footer
|
|– components/
| |– _buttons.scss # Buttons
| |– _card.scss # Card
| |– _form.scss # Form
|
|– pages/
| |– _home.scss # Home page style
| |– _contact.scss # Contact page style
| |– _about.scss # About page style
|
|– themes/
| |– _pink.scss # Pink theme
| |– _mint.scss # Mint theme
|
– main.scss # Main Sass input file
0Sau khi khám phá thêm về Sass, tôi thấy nó thú vị và dễ sử dụng. Nó đã biến mã của tôi trở nên bóng bẩy và chính xác hơn một cách kỳ diệu. Tôi hy vọng bạn cũng học nó và kết hợp nó vào dự án tiếp theo của bạn.