Cách sử dụng CSS preprocessors để tái sử dụng kiểu một cách chính xác (Các vấn đề khi sử dụng @extend trong Stylus)

Tác giả: HowieHz
Ngày xuất bản: 2024-05-09
Danh mục: Khám phá công nghệ > Kỹ thuật frontend > Kiến trúc phong cách

🌍 Tiếng Việt

Lượt xem: 131

Thời gian phát hành phiên bản thứ hai: 2024.5.9 19:00:00
Ngày cập nhật bài viết: 2024.5.8
Phiên bản ban đầu được phát hành: 2024.4.9 10:09:00
Tiêu đề phiên bản ban đầu: Những lỗi về @media và kế thừa trong Stylus

Nhật ký cập nhật bài viết: Bấm vào đây để chuyển đến.

Để tạo ra một kiểu tự động chuyển đổi giữa ánh sáng và bóng tối.

Yêu cầu hiển thị

Khi ở chế độ sáng, body[theme="auto"] phải giống với body[theme="light"].
Khi ở chế độ tối, body[theme="auto"] phải giống với body[theme="dark"].

Kết quả mong đợi sau khi biên dịch tệp styl

Kiểu sáng sẽ nằm trong tệp light.css (nên có một kiểu body[theme="light"]).
Kiểu tối sẽ nằm trong tệp dark.css (nên có một kiểu body[theme="dark"]).
Kiểu tự động chuyển đổi sẽ nằm trong tệp auto.css (tệp auto.css nên chứa ba truy vấn đa phương tiện: không có kết quả @media (prefers-color-scheme: no-preference), truy vấn sáng @media (prefers-color-scheme: light), truy vấn tối @media (prefers-color-scheme: dark)). Mỗi truy vấn @media đều cần có một kiểu body[theme="auto"].

Tóm tắt bài viết trong một câu

Để tái sử dụng kiểu, hãy sử dụng mixin hoặc @block, thay vì trực tiếp sử dụng @extend, mà người ta thường gọi là “kế thừa”.

Hướng dẫn sử dụng mã nguồn trong bài viết

1. Đảm bảo bạn đã cấu hình đúng pnpm.

2. Tạo một thư mục mới.

3. Trong thư mục này, tạo các tệp rỗng theo cấu trúc thư mục được cung cấp trong bài viết (ví dụ: nếu bạn muốn chạy đoạn mã lỗi đầu tiên, bạn cần tạo ba tệp: light.styl, dark.styl, và auto.styl).

4. Mở terminal trong thư mục này.

5. Chạy lệnh sau để cài đặt Stylus:

   1	pnpm install stylus --save-dev

6. Sao chép mã từ bài viết vào các tệp tương ứng.

7. Chạy lệnh sau để biên dịch tệp styl thành tệp css:

   1	pnpm stylus auto.styl dark.styl light.styl

8. Terminal nên hiển thị thông báo:

   1 2 3

   compiled auto.css compiled dark.css compiled light.css

9. Kiểm tra xem các tệp light.css, dark.css, và auto.css đã được tạo ra có đúng như mong đợi hay không.

Mã lỗi

Cấu trúc thư mục ví dụ:

1
2
3
4

.
├── light.styl
├── dark.styl
└── auto.styl

light.styl:

1
2

body[theme="light"]
  background-color: white

dark.styl:

1
2

body[theme="dark"]
  background-color: black

auto.styl:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

@import "dark"
@import "light"

@media (prefers-color-scheme: no-preference)
  body[theme="auto"]
    @extend body[theme="light"]

@media (prefers-color-scheme: light)
  body[theme="auto"]
    @extend body[theme="light"]

@media (prefers-color-scheme: dark)
  body[theme="auto"]
    @extend body[theme="dark"]

Kết quả biên dịch của mã lỗi

light.css:

1
2
3

body[theme="light"] {
  background-color: #fff;
}

dark.css:

1
2
3

body[theme="dark"] {
  background-color: #000;
}

auto.css:

1
2
3
4
5
6
7
8
9

body[theme="dark"],
body[theme="auto"] {
  background-color: #000;
}

body[theme="light"],
body[theme="auto"] {
  background-color: #fff;
}

Mã đúng

Cách 1: Sử dụng Mixins

Cấu trúc thư mục ví dụ:

1
2
3
4
5
6
7

.
├── mixins
│   ├── mixin-light.styl
│   └── mixin-dark.styl
├── light.styl
├── dark.styl
└── auto.styl

mixins/mixin-light.styl:

1
2

theme-light()
  background-color: white

mixins/mixin-dark.styl:

1
2

theme-dark()
  background-color: black

light.styl:

1
2
3
4

@import "mixins/mixin-light"

body[theme="light"]
  theme-light()

dark.styl:

1
2
3
4

@import "mixins/mixin-dark"

body[theme="dark"]
  theme-dark()

auto.styl:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

@import "mixins/mixin-light"
@import "mixins/mixin-dark"

@media (prefers-color-scheme: no-preference)
  body[theme="auto"]
    theme-light()

@media (prefers-color-scheme: light)
  body[theme="auto"]
    theme-light()

@media (prefers-color-scheme: dark)
  body[theme="auto"]
    theme-dark()

Cách 2: Sử dụng @block

Cấu trúc thư mục ví dụ:

1
2
3
4
5
6
7

.
├── mixins
│   ├── mixin-light.styl
│   └── mixin-dark.styl
├── light.styl
├── dark.styl
└── auto.styl

mixins/mixin-light.styl:

1
2

theme-light =
  background-color: white

mixins/mixin-dark.styl:

1
2

theme-dark =
  background-color: black

light.styl:

1
2
3
4

@import "mixins/mixin-light"

body[theme="light"]
  {theme-light}

dark.styl:

1
2
3
4

@import "mixins/mixin-dark"

body[theme="dark"]
  {theme-dark}

auto.styl:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

@import "mixins/mixin-light"
@import "mixins/mixin-dark"

@media (prefers-color-scheme: no-preference)
  body[theme="auto"]
    {theme-light}

@media (prefers-color-scheme: light)
  body[theme="auto"]
    {theme-light}

@media (prefers-color-scheme: dark)
  body[theme="auto"]
    {theme-dark}

Kết quả biên dịch của mã đúng

light.css:

1
2
3

body[theme="light"] {
  background-color: white;
}

dark.css:

1
2
3

body[theme="dark"] {
  background-color: black;
}

auto.css:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

@media (prefers-color-scheme: no-preference) {
  body[theme="auto"] {
    background-color: white;
  }
}

@media (prefers-color-scheme: light) {
  body[theme="auto"] {
    background-color: white;
  }
}

@media (prefers-color-scheme: dark) {
  body[theme="auto"] {
    background-color: black;
  }
}

Hy vọng bài viết giúp bạn hiểu rõ hơn về cách sử dụng Stylus một cách hiệu quả!