Sass giữ mã CSS KHÔ [Không lặp lại chính mình]. Một cách để viết mã DRY là giữ mã liên quan trong các tệp riêng biệt
Bạn có thể tạo các tệp nhỏ với các đoạn mã CSS để đưa vào các tệp Sass khác. Ví dụ về các tệp như vậy có thể là. đặt lại tệp, biến, màu sắc, phông chữ, cỡ chữ, v.v.
Sass nhập tệp
Cũng giống như CSS, Sass cũng hỗ trợ chỉ thị @import
Chỉ thị @import cho phép bạn đưa nội dung của tệp này vào tệp khác
Chỉ thị CSS @import có một nhược điểm lớn do các vấn đề về hiệu suất; . Tuy nhiên, chỉ thị Sass @import bao gồm tệp trong CSS;
Mẹo. Bạn không cần chỉ định phần mở rộng tệp, Sass tự động giả định rằng bạn muốn nói. ngổ ngáo hoặc. tập tin scss. Bạn cũng có thể nhập tệp CSS. Lệnh @import nhập tệp và mọi biến hoặc mixin được xác định trong tệp đã nhập sau đó có thể được sử dụng trong tệp chính
Bạn có thể nhập bao nhiêu tệp tùy thích trong tệp chính
Ví dụ
@import "biến";
@import "colors";
@import "reset";
Hãy xem một ví dụ. Giả sử chúng ta có một tệp đặt lại có tên là "đặt lại. scss", trông như thế này
Ví dụ
Cú pháp SCSS [đặt lại. scss]
html,
body,
ul,
ol {
lề. 0;
phần đệm. 0;
}
và bây giờ chúng tôi muốn nhập "đặt lại. scss" vào một tệp khác có tên là "tiêu chuẩn. scss"
Đây là cách chúng tôi làm điều đó. Việc thêm chỉ thị @import ở đầu tệp là điều bình thường;
Cú pháp SCSS [chuẩn. scss]
@nhập "đặt lại";
body {
họ phông chữ. Helvetica, sans-serif;
cỡ chữ. 18px;
màu. màu đỏ;
}
Vì vậy, khi “tiêu chuẩn. css" được dịch mã, CSS sẽ trông như thế này
đầu ra CSS
html, body, ul, ol {
lề. 0;
phần đệm. 0;
}
body {
họ phông chữ. Helvetica, sans-serif;
cỡ chữ. 18px;
màu. màu đỏ;
}
Chạy ví dụ »
Sass một phần
Theo mặc định, Sass phiên mã tất cả các. tập tin scss trực tiếp. Tuy nhiên, khi bạn muốn nhập tệp, bạn không cần chuyển tệp trực tiếp
Sass có một cơ chế cho việc này. Nếu bạn bắt đầu tên tệp bằng dấu gạch dưới, Sass sẽ không dịch nó. Các tệp được đặt tên theo cách này được gọi là partials trong Sass
Vì vậy, một phần tệp Sass được đặt tên với dấu gạch dưới ở đầu
Ví dụ sau hiển thị một phần tệp Sass có tên "_colors. scss". [Tệp này sẽ không được dịch trực tiếp sang "colors. css"]
Ví dụ
"_màu sắc. scss"
$myPink. #EE82EE;
$myBlue. #4169E1;
$myGreen. #8FBC8F;
Bây giờ, nếu bạn nhập tệp một phần, hãy bỏ dấu gạch dưới. Sass hiểu rằng nó nên nhập tệp "_colors. scss"
Để tránh các sự cố biên dịch SCSS và ánh xạ đường dẫn tệp SCSS, hãy thêm stylePreprocessorOptions vào. góc-cli. tập tin json
Thêm tùy chọn stylePreprocessorOptions ở hai vị trí bên dưới ứng dụng trong tệp .angular-cli.json
- góc-cli. json -> {}bản dựng -> {}tùy chọn
- góc-cli. json -> {}kiểm tra -> {}tùy chọn
Các đường dẫn sau có thể được sử dụng trên toàn cầu trong ứng dụng Góc
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/@syncfusion"
]
},Có thể tải xuống một mẫu góc với trình biên dịch SCSS để hiển thị thành phần Lưới JS 2 cần thiết từ liên kết GitHub sau
Cách ghi đè kiểu
Trong các thành phần Angular được đồng bộ hóa, bạn có thể ghi đè các kiểu điều khiển bằng cách thay thế các giá trị biến
// SASS Variable override
$accent: black;
$primary: rgb[0, 255, 157];
// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
// SASS Variable override
$accent: black;
$primary: rgb[0, 255, 157];
// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
Phiên bản góc-CLI 8 với SASS
Trong phiên bản 8, Nhóm Angular đã chuyển từ
// SASS Variable override
$accent: black;
$primary: rgb[0, 255, 157];
// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
// SASS Variable override
$accent: black;
$primary: rgb[0, 255, 157];
// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
// SASS Variable override
$accent: black;
$primary: rgb[0, 255, 157];
// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
// SASS Variable override
$accent: black;
$primary: rgb[0, 255, 157];
// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
Khi làm việc trong một nhóm lớn với nhiều nhà phát triển chịu trách nhiệm về cùng một cơ sở mã, việc có một sự hiểu biết chung về cách cấu trúc ứng dụng là rất quan trọng. Thời gian dành để tranh luận về các quyết định kiến trúc chiếm một phần lớn trong hoạt động hàng ngày của chúng tôi và có một sự hiểu biết chung sẽ giúp bạn giải quyết chúng một cách lâu dài
Mục tiêu của bài viết này là giúp những nhà phát triển đó bằng cách đề xuất một cấu trúc có thể mở rộng và bảo trì cho các ứng dụng vừa và lớn. Chúng tôi sẽ khám phá cấu trúc trong ngữ cảnh của tài liệu Angular bằng cách sử dụng tuyên bố của họ để làm nổi bật thêm những lợi thế ở đây
Ghi chú. Hầu như không thể tìm thấy một cấu trúc phù hợp với mọi trường hợp sử dụng. Cấu trúc của một ứng dụng sẽ thay đổi rất nhiều tùy thuộc vào dự án và không có bản thiết kế nào ở đây. Bài viết này nhằm mục đích cải thiện quy trình phát triển bằng cách đề xuất một cấu trúc hoạt động tốt cho các ứng dụng vừa và lớn
Cấu trúc gócCó tầm nhìn ngắn hạn về việc thực hiện và tầm nhìn dài hạn. Bắt đầu nhỏ nhưng hãy ghi nhớ nơi ứng dụng đang hướng tới
Tất cả mã của ứng dụng nằm trong một thư mục có tên
5// SASS Variable override $accent: black; $primary: rgb[0, 255, 157]; // syncfusion styles @import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';Cấu trúc ứng dụng sao cho bạn có thể Định vị mã nhanh chóng, Xác định mã trong nháy mắt, giữ cấu trúc Phẳng nhất có thể và Cố gắng KHÔ, nhưng không ảnh hưởng đến khả năng đọc
Đặt tên tệp sao cho bạn biết ngay tệp đó chứa gì và đại diện cho cái gì
Giữ cấu trúc thư mục phẳng càng lâu càng tốt
Lệnh
// SASS Variable override
$accent: black;
$primary: rgb[0, 255, 157];
// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
Tạo một NgModule trong thư mục gốc của ứng dụng, chẳng hạn như trong
7// SASS Variable override $accent: black; $primary: rgb[0, 255, 157]; // syncfusion styles @import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
Trong Angular, mọi thứ được sắp xếp theo mô-đun và mọi ứng dụng đều có ít nhất một trong số chúng, mô-đun gốc của ứng dụng. Mô-đun ứng dụng là điểm vào của ứng dụng và là mô-đun mà Angular sử dụng để khởi động ứng dụng. Hướng dẫn thiết lập khi tạo một ứng dụng mới tạo ra một
// SASS Variable override
$accent: black;
$primary: rgb[0, 255, 157];
// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
// SASS Variable override
$accent: black;
$primary: rgb[0, 255, 157];
// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
Tạo một mô-đun tính năng có tên
@import0 trong thư mục@import1;Không khai báo các thành phần, chỉ thị và đường ống trong một mô-đun dùng chung khi các mục đó sẽ được sử dụng lại và được tham chiếu bởi các thành phần được khai báo trong các mô-đun tính năng khác
Khai báo tất cả các thành phần, chỉ thị và đường dẫn trong
@import0Xuất tất cả các ký hiệu từ
@import0 mà các mô-đun tính năng khác cần sử dụng
Khi làm việc trên các ứng dụng lớn, nhóm Angular đề nghị chúng tôi xem xét tải chậm các mô-đun của mình. Điều này làm giảm kích thước gói ứng dụng của chúng tôi và do đó giảm thời gian xây dựng ban đầu và đây là nơi mà SharedModule thực sự tỏa sáng
SharedModule cho phép chúng tôi sắp xếp và hợp lý hóa mã của mình. Mô-đun được chia sẻ không được có bất kỳ sự phụ thuộc nào vào phần còn lại của ứng dụng và do đó không được dựa vào bất kỳ mô-đun nào khác. Nó phải chứa tất cả các mô-đun có thể tái sử dụng, các mô-đun tính năng lười tải cần thiết để hoạt động. Bạn nên thêm các chỉ thị, đường dẫn và thành phần thường được sử dụng tại đây. Nhiều thư viện của bên thứ ba có sẵn dưới dạng NgModules chẳng hạn như Thiết kế Vật liệu và hiển thị chúng thông qua SharedModule có thể là một ý tưởng hay
Chúng tôi có thể dễ dàng xuất bản và chia sẻ các thành phần này giữa các ứng dụng
Các mô-đun tính năngTạo một NgModule cho tất cả các tính năng riêng biệt trong một ứng dụng; . Tất cả các khu vực tính năng nằm trong thư mục riêng của chúng, với NgModule của riêng chúng
Đặt mô-đun tính năng trong cùng một thư mục được đặt tên với khu vực tính năng;
Đặt tên cho tệp mô-đun tính năng phản ánh tên của khu vực tính năng và thư mục;
Đặt tên cho biểu tượng mô-đun tính năng phản ánh tên của khu vực tính năng, thư mục và tệp;
Ứng dụng Angular ban đầu chỉ có một mô-đun duy nhất, hoạt động tốt cho các ứng dụng nhỏ. Nhưng khi ứng dụng phát triển, bạn sẽ cần xem xét việc chia nhỏ nó thành nhiều mô-đun tính năng, một số mô-đun có thể tải chậm. Các mô-đun này chỉ nên phụ thuộc vào SharedModule và chức năng của chúng phải được đặt trong phạm vi mô-đun
Các mô-đun tính năng mang lại trải nghiệm người dùng dành riêng cho một tính năng ứng dụng cụ thể như phần người dùng hoặc phần quản trị của ứng dụng. Chúng tôi đang nhóm các thành phần, dịch vụ, mô hình và chức năng khác thuộc về nhau. Chúng thường có một thành phần trên cùng đóng vai trò là tính năng gốc và riêng tư, hỗ trợ các thành phần con đi xuống từ nó. Chúng có thể được nhập bởi thư mục gốc
// SASS Variable override
$accent: black;
$primary: rgb[0, 255, 157];
// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
Mô-đun tính năng miền hiếm khi có nhà cung cấp, nhưng khi có nhà cung cấp, thời gian tồn tại của các dịch vụ được cung cấp sẽ giống như thời gian tồn tại của mô-đun. Bắt đầu với góc 6. 0, cách ưa thích để tạo một singleton là đặt
// SASS Variable override
$accent: black;
$primary: rgb[0, 255, 157];
// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
// SASS Variable override
$accent: black;
$primary: rgb[0, 255, 157];
// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
// SASS Variable override
$accent: black;
$primary: rgb[0, 255, 157];
// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
để tạo một dịch vụ đơn lẻ là đặt
// SASS Variable override
$accent: black;
$primary: rgb[0, 255, 157];
// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
// SASS Variable override
$accent: black;
$primary: rgb[0, 255, 157];
// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
// SASS Variable override
$accent: black;
$primary: rgb[0, 255, 157];
// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
// SASS Variable override
$accent: black;
$primary: rgb[0, 255, 157];
// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
Khi bạn cũng cần dịch vụ trong các mô-đun khác, thay vào đó, dịch vụ đó có thể nằm trong phần khai báo của dịch vụ CoreModule
phong cáchTheo cách tương tự như cách chúng tôi muốn tránh làm đầy
// SASS Variable override
$accent: black;
$primary: rgb[0, 255, 157];
// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
// SASS Variable override
$accent: black;
$primary: rgb[0, 255, 157];
// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
Thư mục nội dung được tạo cho chúng tôi bởi Angular CLI bằng lệnh
// SASS Variable override
$accent: black;
$primary: rgb[0, 255, 157];
// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
Mặc dù cấu trúc được mô tả ở trên giải quyết được rất nhiều vấn đề, nhưng chúng tôi vẫn bỏ sót một lĩnh vực lớn, đó là quản lý trạng thái trong Angular. Lý do cho điều này là có rất nhiều cách khác nhau để giải quyết vấn đề chính xác này và giải pháp này có thể không áp dụng cho giải pháp khác. Bối cảnh của Vật liệu góc và các thư viện thành phần khác là một khu vực khác sẽ xác định các khu vực rộng lớn của cấu trúc ứng dụng. Bối cảnh của Sự xuất hiện của Nrwl với các giao diện vi mô cũng đã đạt được sự cường điệu. Bạn có muốn xem loại bài viết này của một số điểm, xin vui lòng cho tôi biết
Tóm lượcChọn một cấu trúc thư mục phù hợp không phải là một nhiệm vụ dễ dàng. Bạn cần thống nhất với nhóm về cấu trúc phù hợp với ứng dụng và những gì có thể phù hợp với nhu cầu này, có thể không phù hợp với nhu cầu khác. Nên hy vọng có giá trị trong những năm tới. Bạn sẽ làm gì khác để đảm bảo một cấu trúc tốt, có thể bảo trì được?