Tôi có thể sử dụng các mô-đun css với scss không?
Sass vừa ra mắt một tính năng mới quan trọng mà bạn có thể nhận ra từ các ngôn ngữ khác. một hệ thống mô-đun. Đây là một bước tiến lớn cho 8. một trong những tính năng Sass được sử dụng nhiều nhất. Mặc dù quy tắc 8 hiện tại cho phép bạn lấy các gói của bên thứ ba và chia Sass của bạn thành “các phần” có thể quản lý được, nhưng nó có một số hạn chế Show
Các tác giả gói Sass (như tôi) đã cố gắng giải quyết các vấn đề về không gian tên bằng cách thêm tiền tố vào các biến và hàm của chúng tôi theo cách thủ công — nhưng các mô-đun Sass là một giải pháp mạnh mẽ hơn nhiều. Tóm lại, 8 đang được thay thế bằng các quy tắc 7 và 8 rõ ràng hơn. Trong vài năm tới, Sass 8 sẽ không được dùng nữa và sau đó sẽ bị xóa. Bạn vẫn có thể sử dụng nhập CSS, nhưng chúng sẽ không được biên dịch bởi Sass. Đừng lo, đã có công cụ di chuyển giúp bạn nâng cấpNhập tệp bằng @use 2 7 mới tương tự như 8. nhưng có một số khác biệt đáng chú ý
Khi chúng tôi 7 một tệp, Sass sẽ tự động tạo một không gian tên dựa trên tên tệp 1Bây giờ chúng tôi có quyền truy cập vào các thành viên từ cả 65 và 69 — nhưng quyền truy cập đó không được chuyển giữa các lần nhập. 69 vẫn không có quyền truy cập vào các biến được xác định trong 65. Vì các tính năng đã nhập được đặt tên, chúng tôi phải sử dụng cú pháp phân chia theo thời gian mới để truy cập chúng
Chúng tôi có thể thay đổi hoặc xóa không gian tên mặc định bằng cách thêm 72 vào phần nhập
Việc sử dụng 73 sẽ thêm một mô-đun vào không gian tên gốc, vì vậy không cần tiền tố, nhưng những thành viên đó vẫn nằm trong phạm vi cục bộ của tài liệu hiện tạiNhập các mô-đun Sass tích hợpCác tính năng Sass nội bộ cũng đã chuyển sang hệ thống mô-đun, vì vậy chúng tôi có toàn quyền kiểm soát không gian tên chung. Có một số mô-đun tích hợp — 74, 75, 76, 77, 78, 79 và 60 — phải được nhập rõ ràng vào một tệp trước khi chúng được sử dụng 6Các mô-đun Sass cũng có thể được nhập vào không gian tên chung 7Các hàm bên trong đã có tên tiền tố, như 61 hoặc 62. có thể được sử dụng mà không cần sao chép tiền tố đó 6Bạn có thể tìm thấy danh sách đầy đủ các mô-đun tích hợp, chức năng và thay đổi tên trong đặc tả mô-đun Sass Các tính năng cốt lõi mới và thay đổiLà một lợi ích phụ, điều này có nghĩa là Sass có thể thêm các chức năng và mixin nội bộ mới một cách an toàn mà không gây ra xung đột tên. Ví dụ thú vị nhất trong bản phát hành này là một mixin 63 có tên là 64. Điều này hoạt động tương tự như 7 nhưng nó chỉ trả về đầu ra CSS được tạo và nó có thể được sử dụng linh hoạt ở bất kỳ đâu trong mã của chúng tôi 5Đối số đầu tiên là một URL mô-đun (như 7) nhưng nó có thể được thay đổi linh hoạt bởi các biến và thậm chí bao gồm nội suy, như 67. Đối số thứ hai (tùy chọn) chấp nhận bản đồ các giá trị cấu hình 8Đối số 68 chấp nhận các khóa và giá trị cấu hình cho bất kỳ biến nào trong mô-đun đã tải, nếu đó là cả hai
3Lưu ý rằng khóa 52 sẽ đặt biến 53Có thêm hai hàm 63 mới. 55 và 56. Mỗi cái trả về một bản đồ tên và giá trị thành viên từ một mô-đun đã được nhập. Chúng chấp nhận một đối số khớp với không gian tên mô-đun 10Một số hàm 63 khác — 58, 59, 80 và 81 — sẽ nhận thêm các đối số 82, cho phép chúng tôi kiểm tra rõ ràng từng không gian tênĐiều chỉnh và chia tỷ lệ màu sắcMô-đun 83 cũng có một số cảnh báo thú vị khi chúng tôi cố gắng loại bỏ một số vấn đề cũ. Nhiều phím tắt kế thừa như 84. hoặc 85 hiện không được dùng nữa để thay thế cho các chức năng 86 và 87 rõ ràng 11Một số chức năng cũ đó (như 88) là dư thừa và không cần thiết. Những người khác - như 89. 30. 31. v.v. - cần được xây dựng lại với logic bên trong tốt hơn. Các chức năng ban đầu được dựa trên 32. trong đó sử dụng toán học tuyến tính. thêm 33 vào độ sáng hiện tại của 34 trong ví dụ của chúng tôi ở trên. Trong hầu hết các trường hợp, chúng tôi thực sự muốn tăng 535 độ sáng theo phần trăm, so với giá trị hiện tại 12Sau khi hoàn toàn không được dùng nữa và bị xóa, các chức năng phím tắt này cuối cùng sẽ xuất hiện lại trong 83 với hành vi mới dựa trên 87 thay vì 86. Điều này đang diễn ra theo từng giai đoạn để tránh những thay đổi đột ngột gây ảnh hưởng ngược. Trong thời gian chờ đợi, tôi khuyên bạn nên kiểm tra mã của mình theo cách thủ công để xem nơi nào 87 có thể hoạt động tốt hơn cho bạnĐịnh cấu hình thư viện đã nhậpCác thư viện của bên thứ ba hoặc có thể sử dụng lại thường sẽ đi kèm với các biến cấu hình chung mặc định để bạn ghi đè. Chúng tôi đã từng làm điều đó với các biến trước khi nhập 13Vì các mô-đun đã sử dụng không còn quyền truy cập vào các biến cục bộ, nên chúng tôi cần một cách mới để đặt các giá trị mặc định đó. Chúng tôi có thể làm điều đó bằng cách thêm bản đồ cấu hình vào 7 14Điều này tương tự như đối số 68 trong 64. nhưng thay vì sử dụng tên biến làm khóa, chúng tôi sử dụng chính biến đó, bắt đầu bằng 103Tôi thích cách điều này tạo nên cấu hình rõ ràng, nhưng có một quy tắc đã khiến tôi vấp ngã nhiều lần. một mô-đun chỉ có thể được cấu hình một lần, lần đầu tiên nó được sử dụng. Đơn hàng nhập khẩu luôn quan trọng đối với Sass, ngay cả với 8. nhưng những vấn đề đó luôn âm thầm thất bại. Bây giờ chúng tôi nhận được một lỗi rõ ràng, điều này vừa tốt vừa đôi khi gây ngạc nhiên. Trước tiên, hãy đảm bảo 7 và định cấu hình thư viện trong bất kỳ tệp "điểm vào" nào (tài liệu trung tâm nhập tất cả các phần), để các cấu hình đó biên dịch trước 7 khác của thư viện(Hiện tại) không thể "xâu chuỗi" các cấu hình lại với nhau trong khi vẫn giữ cho chúng có thể chỉnh sửa được, nhưng bạn có thể bọc một mô-đun đã định cấu hình cùng với các tiện ích mở rộng và chuyển mô-đun đó thành một mô-đun mới Truyền tệp với @forwardChúng tôi không phải lúc nào cũng cần sử dụng tệp và truy cập các thành viên của nó. Đôi khi chúng tôi chỉ muốn chuyển nó cho các lần nhập trong tương lai. Giả sử chúng ta có nhiều phần liên quan đến biểu mẫu và chúng ta muốn nhập tất cả chúng lại với nhau dưới dạng một không gian tên. Chúng ta có thể làm điều đó với 8 15Các thành viên của tệp được chuyển tiếp không có sẵn trong tài liệu hiện tại và không có không gian tên nào được tạo, nhưng các biến, hàm và mixin đó sẽ có sẵn khi một tệp khác muốn 7 hoặc 8 toàn bộ bộ sưu tập. Nếu các phần được chuyển tiếp chứa CSS thực, thì phần đó cũng sẽ được chuyển mà không tạo đầu ra cho đến khi gói được sử dụng. Tại thời điểm đó, tất cả sẽ được coi là một mô-đun duy nhất với một không gian tên duy nhất 16Ghi chú. nếu bạn yêu cầu Sass nhập một thư mục, nó sẽ tìm một tệp có tên 110 hoặc 111)Theo mặc định, tất cả các thành viên công cộng sẽ chuyển tiếp với một mô-đun. Nhưng chúng ta có thể chọn lọc hơn bằng cách thêm các mệnh đề 112 hoặc 113 và nêu tên các thành viên cụ thể để bao gồm hoặc loại trừ 17Ghi chú. khi các chức năng và mixin chia sẻ một tên, chúng được hiển thị và ẩn cùng nhau Để làm rõ nguồn hoặc tránh xung đột đặt tên giữa các mô-đun được chuyển tiếp, chúng tôi có thể sử dụng 114 để thêm tiền tố cho các thành viên của một phần khi chúng tôi chuyển tiếp 18Và, nếu cần, chúng ta luôn có thể 7 và 8 cùng một mô-đun bằng cách thêm cả hai quy tắc 19Điều đó đặc biệt hữu ích nếu bạn muốn bọc một thư viện bằng cấu hình hoặc bất kỳ công cụ bổ sung nào, trước khi chuyển nó sang các tệp khác của bạn. Nó thậm chí có thể giúp đơn giản hóa đường dẫn nhập 0Cả 7 và 8 phải được khai báo ở thư mục gốc của tài liệu (không được lồng vào nhau) và ở đầu tệp. Chỉ 119 và các định nghĩa biến đơn giản mới có thể xuất hiện trước các lệnh nhậpDi chuyển đến các mô-đunĐể kiểm tra cú pháp mới, tôi đã xây dựng một thư viện Sass mã nguồn mở mới (Hệ thống màu xếp tầng) và một trang web mới cho ban nhạc của tôi — cả hai vẫn đang được xây dựng. Tôi muốn hiểu các mô-đun với tư cách vừa là thư viện vừa là tác giả trang web. Hãy bắt đầu với trải nghiệm “người dùng cuối” về cách viết kiểu trang web bằng cú pháp mô-đun… Duy trì và viết phong cáchSử dụng các mô-đun trên trang web là một niềm vui. Cú pháp mới khuyến khích một kiến trúc mã mà tôi đã sử dụng. Tất cả cấu hình toàn cầu và công cụ nhập của tôi trực tiếp trong một thư mục (tôi gọi nó là 120), với một tệp chỉ mục chuyển tiếp mọi thứ tôi cần 1Khi tôi xây dựng các khía cạnh khác của trang web, tôi có thể nhập các công cụ và cấu hình đó vào bất cứ nơi nào tôi cần 2Điều này thậm chí còn hoạt động với các thư viện Sass hiện có của tôi, như Accoutrement và Herman, vẫn sử dụng cú pháp 8 cũ. Vì quy tắc 8 sẽ không được thay thế ở mọi nơi trong một sớm một chiều, Sass đã xây dựng trong giai đoạn chuyển tiếp. Các mô-đun hiện có sẵn, nhưng 8 sẽ không bị phản đối trong một hoặc hai năm nữa — và chỉ bị xóa khỏi ngôn ngữ một năm sau đó. Trong khi đó, hai hệ thống sẽ hoạt động cùng nhau theo một trong hai hướng
Điều đó có nghĩa là bạn có thể bắt đầu sử dụng cú pháp mô-đun mới ngay lập tức mà không cần đợi bản phát hành mới của các thư viện yêu thích của mình. và tôi có thể dành chút thời gian để cập nhật tất cả các thư viện của mình công cụ di chuyểnViệc nâng cấp sẽ không mất nhiều thời gian nếu chúng ta sử dụng Công cụ di chuyển do Jennifer Thakar xây dựng. Nó có thể được cài đặt với Node, Chocolatey hoặc Homebrew 3Đây không phải là công cụ dùng một lần để di chuyển sang các mô-đun. Giờ đây, Sass đã hoạt động trở lại trong quá trình phát triển (xem bên dưới), công cụ di chuyển cũng sẽ nhận được các bản cập nhật thường xuyên để giúp di chuyển từng tính năng mới. Bạn nên cài đặt cái này trên toàn cầu và giữ nó xung quanh để sử dụng trong tương lai Trình di chuyển có thể được chạy từ dòng lệnh và hy vọng cũng sẽ được thêm vào các ứng dụng của bên thứ ba như CodeKit và Scout. Trỏ nó vào một tệp Sass duy nhất, chẳng hạn như 130. và cho nó biết (những) di chuyển nào sẽ được áp dụng. Tại thời điểm này, chỉ có một lần di chuyển được gọi là 131 4Theo mặc định, trình di chuyển sẽ chỉ cập nhật một tệp duy nhất, nhưng trong hầu hết các trường hợp, chúng tôi sẽ muốn cập nhật tệp chính và tất cả các tệp phụ thuộc của nó. bất kỳ phần nào được nhập, chuyển tiếp hoặc sử dụng. Chúng tôi có thể làm điều đó bằng cách đề cập đến từng tệp riêng lẻ hoặc bằng cách thêm cờ 132 5Để chạy thử, chúng tôi có thể thêm 133 (hoặc viết tắt là 134) và xem kết quả mà không thay đổi bất kỳ tệp nào. Có một số tùy chọn khác mà chúng ta có thể sử dụng để tùy chỉnh quá trình di chuyển — thậm chí một tùy chọn cụ thể để giúp các tác giả thư viện xóa các không gian tên thủ công cũ — nhưng tôi sẽ không đề cập đến tất cả chúng ở đây. Công cụ di chuyển được ghi lại đầy đủ trên trang web SassCập nhật các thư viện đã xuất bảnTôi gặp phải một số vấn đề về phía thư viện, cụ thể là cố gắng cung cấp cấu hình người dùng trên nhiều tệp và xử lý các cấu hình chuỗi bị thiếu. Các lỗi đặt hàng có thể khó gỡ lỗi, nhưng kết quả rất đáng để nỗ lực và tôi nghĩ chúng ta sẽ sớm thấy một số bản vá bổ sung sắp ra mắt. Tôi vẫn phải thử nghiệm công cụ di chuyển trên các gói phức tạp và có thể viết một bài tiếp theo cho các tác giả thư viện Điều quan trọng cần biết ngay bây giờ là Sass đã bảo vệ chúng tôi trong giai đoạn chuyển tiếp. Các mô-đun và tính năng nhập không chỉ có thể hoạt động cùng nhau mà chúng tôi còn có thể tạo các tệp "chỉ nhập" để cung cấp trải nghiệm tốt hơn cho người dùng cũ vẫn đang truy cập thư viện của chúng tôi. Trong hầu hết các trường hợp, đây sẽ là phiên bản thay thế của tệp gói chính và bạn sẽ muốn chúng cạnh nhau. 136 cho người dùng mô-đun và 137 cho người dùng cũ. Bất cứ khi nào người dùng gọi 138, nó sẽ tải phiên bản 139 của tệp 6Điều này đặc biệt hữu ích để thêm tiền tố cho người dùng không theo mô-đun 7Nâng cấp SassBạn có thể nhớ rằng Sass đã đóng băng tính năng vài năm trước, để bắt kịp nhiều cách triển khai khác nhau (LibSass, Node Sass, Dart Sass) và cuối cùng đã ngừng triển khai Ruby ban đầu. Việc đóng băng đó đã kết thúc vào năm ngoái, với một số tính năng mới cũng như các cuộc thảo luận và phát triển tích cực trên GitHub – nhưng không có nhiều sự phô trương. Nếu bạn bỏ lỡ những bản phát hành đó, bạn có thể cập nhật trên Sass Blog
Dart Sass hiện là triển khai chính tắc và nói chung sẽ là người đầu tiên triển khai các tính năng mới. Nếu bạn muốn bản mới nhất, tôi khuyên bạn nên chuyển đổi. Bạn có thể cài đặt Dart Sass với Node, Chocolatey hoặc Homebrew. Nó cũng hoạt động tốt với các bước xây dựng gulp-sass hiện có Giống như CSS (kể từ CSS3), không còn một số phiên bản thống nhất duy nhất cho các bản phát hành mới. Tất cả các triển khai Sass đang hoạt động từ cùng một đặc điểm kỹ thuật, nhưng mỗi triển khai có một lịch phát hành và đánh số duy nhất, được phản ánh cùng với thông tin hỗ trợ trong tài liệu mới tuyệt đẹp do Jina thiết kế Bạn có thể trộn SCSS và CSS không?Chúng tôi có thể dễ dàng nhập các tệp CSS trong tệp sass . Nhưng nó bị cấm không bao gồm. phần mở rộng css trong câu lệnh nhập.
SCSS CSS có hợp lệ không?SCSS. Cú pháp SCSS sử dụng phần mở rộng tệp. scss. Với một vài ngoại lệ nhỏ, nó là một siêu bộ CSS, có nghĩa là về cơ bản tất cả CSS hợp lệ cũng là SCSS hợp lệ .
Bạn có thể sử dụng giao diện người dùng vật chất với SCSS không?Nếu bạn muốn sử dụng lớp CSS/SCSS trong thành phần MUI, bạn nên nhập tệp trực tiếp vào thành phần Bảng . Tuy nhiên, sẽ không tốt khi sử dụng SCSS với thành phần MUI, bạn nên sử dụng makeStyles hoặc withStyles để tạo kiểu cho thành phần MUI. |