Trình kết hợp trong lồng nhau
Bài viết này giải thích về các trình kết hợp trong lồng nhau.
Chúng tôi sẽ giải thích cách sử dụng trình kết hợp trong lồng nhau với SASS và cung cấp mã mẫu để giúp bạn hiểu từng bước.
YouTube Video
Trình kết hợp trong lồng nhau
Trong SASS, bạn có thể viết bộ chọn CSS ngắn gọn dựa trên mối quan hệ cha-con, nhưng cần chú ý đặc biệt để xử lý đúng các trình kết hợp như bộ chọn con cháu và anh em liền kề.
Cơ bản về lồng nhau
Trong SASS, bằng cách lồng các bộ chọn con trong bộ chọn cha, bạn có thể thể hiện mối quan hệ cha-con trong CSS một cách rõ ràng và ngắn gọn.
Ví dụ: Lồng nhau cơ bản
1.nav {
2 ul {
3 li {
4 color: blue;
5 }
6 }
7}CSS đã biên dịch
1.nav ul li {
2 color: blue;
3}Tham chiếu bộ chọn cha (&)
& trong SASS được sử dụng để tham chiếu bộ chọn cha hiện tại.
Kết hợp trình kết hợp và &
Bằng cách sử dụng &, bạn có thể tạo các bộ chọn linh hoạt.
Mẫu
1.card {
2 & > .title {
3 font-weight: bold;
4 }
5 & + .card {
6 margin-top: 20px;
7 }
8}CSS đã biên dịch
1.card > .title {
2 font-weight: bold;
3}
4.card + .card {
5 margin-top: 20px;
6}Ký hiệu viết tắt cho &
Trong SASS, khi một bộ kết hợp được đặt ở đầu bộ chọn, bộ chọn cha sẽ tự động được thêm vào, vì vậy bạn có thể bỏ qua ký hiệu &.
Các trường hợp có thể bỏ qua
Ví dụ, khi bạn viết + .item, SASS ngầm hiểu thành & + .item và tự động tạo kết hợp với bộ chọn cha.
Mẫu
1.item {
2 + .item {
3 margin-top: 10px;
4 }
5 &--hover {
6 background-color: red;
7 }
8}CSS đã biên dịch
1.item + .item {
2 margin-top: 10px;
3}
4.item--hover {
5 background-color: red;
6}Tổng quan về các trình kết hợp
Trình kết hợp CSS xác định mối quan hệ giữa các bộ chọn. Sau đây là các loại trình kết hợp chính.
-
Bộ chọn con cháu (dấu cách) Bộ chọn con cháu nhắm đến tất cả các phần tử con cháu nằm trong một phần tử cha. Ví dụ:
.parent .child -
Bộ chọn con trực tiếp (
>) Bộ chọn con trực tiếp chỉ nhắm đến các phần tử con trực tiếp. Ví dụ:.parent > .child -
Bộ chọn anh em liền kề (
+) Bộ chọn anh em liền kề nhắm đến phần tử anh em kế tiếp liền kề. Ví dụ:.sibling1 + .sibling2 -
Bộ chọn anh em tổng quát (
~) Bộ chọn anh em tổng quát nhắm đến tất cả các phần tử anh em cùng cấp về sau. Ví dụ:.sibling1 ~ .sibling2
Cách sử dụng trình kết hợp trong SASS
Bộ chọn con cháu (dấu cách)
Trong lồng nhau của SASS, bộ chọn con cháu bằng dấu cách được áp dụng mặc định.
Mẫu
1.container {
2 .header {
3 .title {
4 font-size: 20px;
5 }
6 }
7}CSS đã biên dịch
1.container .header .title {
2 font-size: 20px;
3}Bộ chọn con trực tiếp (>)
Nếu bạn muốn sử dụng bộ chọn con trực tiếp, hãy ghi rõ > trong mã SASS của bạn.
Mẫu
1.container {
2 & > .header {
3 & > .title {
4 font-size: 20px;
5 }
6 }
7}CSS đã biên dịch
1.container > .header > .title {
2 font-size: 20px;
3}Bộ chọn anh em liền kề (+)
Để tạo kiểu cho phần tử anh em kế tiếp liền kề, hãy sử dụng +.
Mẫu
1.item {
2 & + .item {
3 margin-top: 10px;
4 }
5}CSS đã biên dịch
1.item + .item {
2 margin-top: 10px;
3}Bộ chọn anh em tổng quát (~)
Để tạo kiểu cho tất cả anh em tiếp theo cùng cấp, hãy sử dụng ~.
Mẫu
1.alert {
2 & ~ .alert {
3 border-top: 1px solid red;
4 }
5}CSS đã biên dịch
1.alert ~ .alert {
2 border-top: 1px solid red;
3}Các giả lớp và giả phần tử với lồng nhau
Các giả lớp và giả phần tử cũng có thể được viết dễ dàng trong SASS.
Mẫu
1.button {
2 &:hover {
3 background-color: blue;
4 }
5 &::after {
6 content: '';
7 display: block;
8 }
9}CSS đã biên dịch
1.button:hover {
2 background-color: blue;
3}
4.button::after {
5 content: '';
6 display: block;
7}Mẫu thực tế
Dưới đây là ví dụ về một kiểu phức tạp kết hợp nhiều trình kết hợp.
Mã SASS
1.menu {
2 .menu-item {
3 & > .submenu {
4 display: none;
5
6 & > .submenu-item {
7 font-size: 14px;
8 }
9 }
10 & + .menu-item {
11 margin-left: 15px;
12 }
13 }
14}CSS đã biên dịch
1.menu .menu-item > .submenu {
2 display: none;
3}
4.menu .menu-item > .submenu > .submenu-item {
5 font-size: 14px;
6}
7.menu .menu-item + .menu-item {
8 margin-left: 15px;
9}Tóm tắt
Nếu bạn hiểu đúng về lồng nhau và các trình kết hợp trong SASS, bạn có thể viết CSS ngắn gọn và dễ đọc hơn.
Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.