Mô-đun CSS với Sass

Hiện chỉ có Dart Sass hỗ trợ

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

6. Người dùng triển khai khác phải sử dụng quy tắc

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

7 thay thế

Quy tắc

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

6 tải mixin, hàm và biến từ các biểu định kiểu Sass khác và kết hợp CSS từ nhiều biểu định kiểu lại với nhau. Các biểu định kiểu được tải bởi

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

6 được gọi là "mô-đun". Sass cũng cung cấp các mô-đun tích hợp với đầy đủ các chức năng hữu ích

Quy tắc

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

6 đơn giản nhất được viết là

code {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

1, quy tắc này tải mô-đun tại URL đã cho. Mọi kiểu được tải theo cách này sẽ được đưa vào chính xác một lần trong đầu ra CSS đã biên dịch, bất kể các kiểu đó được tải bao nhiêu lần

⚠️ Lưu ý

Các quy tắc

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

6 của biểu định kiểu phải xuất hiện trước bất kỳ quy tắc nào khác ngoài

code {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

3, bao gồm các quy tắc về kiểu dáng. Tuy nhiên, bạn có thể khai báo biến trước quy tắc

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

6 để sử dụng khi

SCSS Cú pháp

// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

0

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

1

Cú pháp Sass

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

2____13

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

Đầu ra CSS

code {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

Bạn có thể truy cập các biến, hàm và mixin từ một mô-đun khác bằng cách viết

code {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

5,

code {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

6 hoặc

code {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

7. Theo mặc định, không gian tên chỉ là thành phần cuối cùng của URL của mô-đun

Các thành viên (biến, hàm và mixin) được tải bằng

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

6 chỉ hiển thị trong biểu định kiểu tải chúng. Các biểu định kiểu khác sẽ cần phải viết các quy tắc

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

6 của riêng chúng nếu chúng cũng muốn truy cập chúng. Điều này giúp bạn dễ dàng tìm ra chính xác từng thành viên đến từ đâu. Nếu muốn tải thành viên từ nhiều tệp cùng một lúc, bạn có thể sử dụng quy tắc

code {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

3 để chuyển tiếp tất cả họ từ một tệp được chia sẻ

💡 Sự thật thú vị

Bởi vì

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

6 thêm không gian tên vào tên thành viên, nên có thể an toàn khi chọn những tên rất đơn giản như

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

32 hoặc

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

33 khi viết biểu định kiểu. Quy tắc này khác với quy tắc cũ của

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

7, quy tắc khuyến khích người dùng viết tên dài như

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

35 để tránh xung đột với các thư viện khác và giúp giữ cho biểu định kiểu của bạn rõ ràng và dễ đọc

SCSS Cú pháp

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

3____28

Cú pháp Sass

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

9

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

00

Đầu ra CSS

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

01

Theo mặc định, không gian tên của mô-đun chỉ là thành phần cuối cùng của URL mà không có phần mở rộng tệp. Tuy nhiên, đôi khi bạn có thể muốn chọn không gian tên khác—bạn có thể muốn sử dụng tên ngắn hơn cho mô-đun mà bạn đề cập đến nhiều hoặc bạn có thể đang tải nhiều mô-đun có cùng tên tệp. Bạn có thể làm điều này bằng cách viết 

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

36

SCSS Cú pháp

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

3____103

Cú pháp Sass

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

9

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

05

Đầu ra CSS

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

01

Bạn thậm chí có thể tải một mô-đun mà không cần vùng tên bằng cách viết 

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

37. Tuy nhiên, chúng tôi khuyên bạn chỉ nên làm điều này cho các biểu định kiểu do bạn viết;

SCSS Cú pháp

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

3____108

Cú pháp Sass

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

9

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

10

Đầu ra CSS

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

01

Với tư cách là tác giả biểu định kiểu, bạn có thể không muốn tất cả các thành viên mà bạn xác định có sẵn bên ngoài biểu định kiểu của mình. Sass giúp dễ dàng xác định thành viên riêng tư bằng cách bắt đầu tên của thành viên đó bằng

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

38 hoặc

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

39. Các thành phần này sẽ hoạt động bình thường trong biểu định kiểu xác định chúng, nhưng chúng sẽ không phải là một phần của API công khai của mô-đun. Điều đó có nghĩa là các biểu định kiểu tải mô-đun của bạn không thể nhìn thấy chúng

💡 Sự thật thú vị

Nếu bạn muốn đặt một thành viên ở chế độ riêng tư cho toàn bộ gói thay vì chỉ một mô-đun đơn lẻ, chỉ cần không chuyển tiếp mô-đun của nó từ bất kỳ điểm vào nào của gói của bạn (bảng định kiểu mà bạn yêu cầu người dùng tải để sử dụng gói của bạn). Bạn thậm chí có thể trong khi chuyển tiếp phần còn lại của mô-đun

SCSS Cú pháp

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

12

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

13

Cú pháp Sass

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

14

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

15

Biểu định kiểu có thể xác định các biến bằng cách làm cho chúng có thể định cấu hình. Để tải một mô-đun có cấu hình, hãy viết

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

81. Các giá trị đã định cấu hình sẽ ghi đè giá trị mặc định của biến

SCSS Cú pháp

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

16____117

Cú pháp Sass

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

18

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

19

Đầu ra CSS

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

20

Việc định cấu hình các mô-đun bằng

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

82 có thể rất tiện lợi, đặc biệt khi sử dụng các thư viện ban đầu được viết để hoạt động với quy tắc

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

7. Nhưng nó không đặc biệt linh hoạt và chúng tôi không khuyên dùng nó cho các trường hợp sử dụng nâng cao hơn. Nếu bạn thấy mình muốn định cấu hình nhiều biến cùng một lúc, hãy chuyển bản đồ làm cấu hình hoặc cập nhật cấu hình sau khi mô-đun được tải, hãy cân nhắc viết một mixin để đặt các biến của bạn thay thế và một mixin khác để đưa vào các kiểu của bạn

SCSS Cú pháp

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

21

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

22

Cú pháp Sass

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

23

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

24

Đầu ra CSS

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

25

Sau khi tải một mô-đun, bạn có thể chỉ định lại các biến của mô-đun đó

SCSS Cú pháp

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

26

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

27____128

Cú pháp Sass

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

29

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

30____131

Điều này thậm chí còn hiệu quả nếu bạn nhập một mô-đun không có không gian tên bằng cách sử dụng 

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

84. Việc gán cho một tên biến được xác định trong mô-đun đó sẽ ghi đè giá trị của biến đó trong mô-đun đó

⚠️ Lưu ý

Không thể chỉ định lại các biến mô-đun tích hợp (chẳng hạn như )

Sẽ không thú vị gì khi viết ra các URL tuyệt đối cho mọi biểu định kiểu mà bạn tải, vì vậy, thuật toán tìm mô-đun của Sass giúp việc này dễ dàng hơn một chút. Đối với người mới bắt đầu, bạn không cần phải viết rõ ràng phần mở rộng của tệp mà bạn muốn tải;

⚠️ Lưu ý

Để đảm bảo rằng biểu định kiểu hoạt động trên mọi hệ điều hành, Sass tải tệp theo URL, không phải theo đường dẫn tệp. Điều này có nghĩa là bạn cần sử dụng dấu gạch chéo lên, không phải dấu gạch chéo ngược, ngay cả trên Windows

Tất cả các triển khai Sass đều cho phép người dùng cung cấp đường dẫn tải. đường dẫn trên hệ thống tệp mà Sass sẽ xem xét khi định vị mô-đun. Ví dụ: nếu bạn vượt qua

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

90 làm đường dẫn tải, thì bạn có thể sử dụng

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

91 để tải

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

92

Tuy nhiên, các mô-đun sẽ luôn được tải so với tệp hiện tại trước tiên. Đường dẫn tải sẽ chỉ được sử dụng nếu không có tệp tương đối nào khớp với URL của mô-đun. Điều này đảm bảo rằng bạn không thể vô tình làm xáo trộn quá trình nhập tương đối của mình khi thêm thư viện mới

💡 Sự thật thú vị

Không giống như một số ngôn ngữ khác, Sass không yêu cầu bạn sử dụng

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

93 để nhập tương đối. Nhập khẩu tương đối luôn có sẵn

Theo quy ước, các tệp Sass chỉ được tải dưới dạng mô-đun, không được biên dịch riêng, bắt đầu bằng

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

39 (như trong

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

95). Chúng được gọi là partials và chúng yêu cầu các công cụ Sass không tự biên dịch các tệp đó. Bạn có thể bỏ qua

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

39 khi nhập một phần

Nếu bạn viết

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

97 hoặc

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

98 trong một thư mục, thì tệp chỉ mục sẽ được tải tự động khi bạn tải URL của chính thư mục đó

SCSS Cú pháp

// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

0

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

34

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

35

Cú pháp Sass

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

2____13

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

38

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

39

Đầu ra CSS

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

0

Ngoài việc tải các tệp

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

99 và

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

000, Sass có thể tải các tệp ______1001 đơn giản cũ

SCSS Cú pháp

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

1

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

2

Cú pháp Sass

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

1

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

4

Đầu ra CSS

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

5

Các tệp CSS được tải dưới dạng mô-đun không cho phép bất kỳ tính năng đặc biệt nào của Sass và do đó không thể hiển thị bất kỳ biến, hàm hoặc mixin nào của Sass. Để đảm bảo tác giả không vô tình viết Sass trong CSS của họ, tất cả các tính năng của Sass không phải là CSS hợp lệ sẽ tạo ra lỗi. Nếu không, CSS sẽ được hiển thị nguyên trạng. Nó thậm chí có thể được mở rộng

Quy tắc

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

6 nhằm thay thế quy tắc cũ của

// style.sass
@use 'foundation/code'
@use 'foundation/lists'

7, nhưng quy tắc này được thiết kế có chủ ý để hoạt động theo cách khác. Dưới đây là một số điểm khác biệt chính giữa hai

• // style.sass
  @use 'foundation/code'
  @use 'foundation/lists'
  

  6 chỉ cung cấp các biến, hàm và mixin trong phạm vi của tệp hiện tại. Nó không bao giờ thêm chúng vào phạm vi toàn cầu. Điều này giúp bạn dễ dàng tìm ra nguồn gốc của từng tên mà tham chiếu tệp Sass của bạn và có nghĩa là bạn có thể sử dụng các tên ngắn hơn mà không có bất kỳ rủi ro xung đột nào

• // style.sass
  @use 'foundation/code'
  @use 'foundation/lists'
  

  6 chỉ tải từng tệp một lần. Điều này đảm bảo rằng bạn sẽ không vô tình sao chép nhiều lần CSS phụ thuộc của mình

  Tôi có thể sử dụng Sass với các mô-đun CSS không?

  Có, có thể . Bạn có thể tạo các tệp có phần mở rộng ". mô-đun. scss" để sử dụng Mô-đun SCSS và CSS cùng lúc.

  Làm cách nào để đưa Sass vào CSS?

  Đầu tiên, tải xuống và cài đặt trình soạn thảo VS Code của Microsoft nếu bạn chưa cài đặt. Sau đó, khởi chạy trình chỉnh sửa để bạn có thể tải xuống tiện ích Trình biên dịch Sass trực tiếp . Và đó là tất cả những gì bạn phải làm. Sau khi cài đặt xong, bạn sẽ có thể sử dụng Sass trong các dự án của mình.

  Sass có tốt hơn CSS không?

  SASS cung cấp rất nhiều tính năng giúp nó trở thành công cụ tốt hơn CSS dành cho nhà phát triển . Một số điểm nổi bật chính của nó là. Khả năng tương thích với CSS. Một trong những tính năng chính của SASS là khả năng tương thích cao với biểu định kiểu xếp tầng, nghĩa là SASS cung cấp hỗ trợ cho nhiều phiên bản CSS.

  Bạn có thể sử dụng các mô-đun SCSS trong React không?

  Để bắt đầu sử dụng Mô-đun CSS trong Dự án React, bạn không cần nhập hoặc cài đặt bất kỳ thư viện bên thứ ba nào. Bạn phải nhập mô-đun CSS trước khi sử dụng các thành phần React của nó . Không cần mã bổ sung hoặc mã của bên thứ ba mà bạn đang thêm vào Mô-đun CSS khi sử dụng chúng.