Lồng nhau trong SASS

Bài viết này giải thích về tính năng lồng nhau trong SASS.

Chúng tôi sẽ giải thích từng bước về lồng nhau trong SASS, kèm theo mã ví dụ để giúp bạn hiểu sâu hơn.

YouTube Video

Lồng nhau trong SASS

SASS là một ngôn ngữ mở rộng của CSS, cung cấp nhiều tính năng giúp việc tạo kiểu trở nên hiệu quả hơn. Trong các tính năng này, lồng nhau là một tính năng đặc biệt hữu ích để thể hiện trực quan cấu trúc phân cấp của CSS.

Cơ bản về Lồng nhau

Trong SASS, bạn có thể tổ chức mã của mình một cách trực quan bằng cách viết các bộ chọn CSS theo cấu trúc phân cấp. Ví dụ, hãy xem cách bạn có thể viết lại đoạn mã CSS sau bằng cách sử dụng lồng nhau.

 1/* CSS */
 2.nav {
 3    background-color: #333;
 4}
 5.nav ul {
 6    margin: 0;
 7    padding: 0;
 8}
 9.nav ul li {
10    list-style: none;
11}
12.nav ul li a {
13    color: #fff;
14    text-decoration: none;
15}

Bằng cách sử dụng SASS, bạn có thể viết đoạn mã này ngắn gọn hơn với lồng nhau như sau.

 1/* SASS */
 2.nav {
 3    background-color: #333;
 4
 5    ul {
 6        margin: 0;
 7        padding: 0;
 8
 9        li {
10            list-style: none;
11
12            a {
13                color: #fff;
14                text-decoration: none;
15            }
16        }
17    }
18}

• Đoạn mã này sử dụng tính năng lồng nhau của SASS để mô tả các kiểu của menu điều hướng một cách ngắn gọn và có hệ thống phân cấp. Nhờ sử dụng lồng nhau, mối quan hệ cha-con trở nên rõ ràng về mặt trực quan và khả năng đọc mã được cải thiện.

Tham chiếu đến Bộ chọn cha (&)

Khi bạn cần tham chiếu đến bộ chọn cha bên trong các kiểu lồng nhau, hãy sử dụng &. Điều này cho phép bạn tạo ra các bộ chọn với trạng thái hoặc bộ điều chỉnh cụ thể.

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4
 5    &:hover {
 6        background-color: #0056b3;
 7    }
 8
 9    &:active {
10        background-color: #003f7f;
11    }
12}

• Đoạn mã này sử dụng & trong SCSS để định nghĩa các trạng thái :hover và :active cho bộ chọn cha .button.

CSS được tạo ra

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4}
 5.button:hover {
 6    background-color: #0056b3;
 7}
 8.button:active {
 9    background-color: #003f7f;
10}

Lồng nhau Media Queries

Trong SASS, bạn cũng có thể lồng các media queries. Điều này giúp bạn triển khai thiết kế đáp ứng đồng thời giữ được sự liên quan giữa các kiểu dáng.

 1.container {
 2    width: 100%;
 3
 4    @media (min-width: 768px) {
 5        width: 750px;
 6    }
 7
 8    @media (min-width: 1024px) {
 9        width: 970px;
10    }
11}

• Đoạn mã này lồng một media query bên trong lớp .container, giúp thiết kế đáp ứng có thể thay đổi chiều rộng dựa trên kích thước màn hình.

CSS được tạo ra

 1.container {
 2    width: 100%;
 3}
 4@media (min-width: 768px) {
 5    .container {
 6        width: 750px;
 7    }
 8}
 9@media (min-width: 1024px) {
10    .container {
11        width: 970px;
12    }
13}

Những điểm cần lưu ý về Lồng nhau

Sử dụng quá nhiều lồng nhau có thể khiến mã của bạn trở nên phức tạp và khó bảo trì. Bạn nên tránh lồng nhau quá sâu như ví dụ dưới đây.

 1.header {
 2    .nav {
 3        ul {
 4            li {
 5                a {
 6                    color: red;
 7                }
 8            }
 9        }
10    }
11}

Loại mã này được lồng vào quá sâu, vì vậy có thể được tái cấu trúc như sau.

1.header .nav ul li a {
2    color: red;
3}

Ví dụ thực tế: Thanh điều hướng

Dưới đây là ví dụ về cách tạo kiểu thanh điều hướng bằng lồng nhau trong SASS.

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4
 5    ul {
 6        display: flex;
 7        list-style: none;
 8        margin: 0;
 9        padding: 0;
10
11        li {
12            margin-right: 15px;
13
14            a {
15                color: #fff;
16                text-decoration: none;
17
18                &:hover {
19                    text-decoration: underline;
20                }
21            }
22        }
23    }
24}

• Đoạn mã này tổ chức và định nghĩa các kiểu cho danh sách và liên kết trong thanh điều hướng, bao gồm hiệu ứng hover, bằng cách sử dụng lồng nhau trong SASS.

CSS được tạo ra

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4}
 5.navbar ul {
 6    display: flex;
 7    list-style: none;
 8    margin: 0;
 9    padding: 0;
10}
11.navbar ul li {
12    margin-right: 15px;
13}
14.navbar ul li a {
15    color: #fff;
16    text-decoration: none;
17}
18.navbar ul li a:hover {
19    text-decoration: underline;
20}

Tóm tắt

Tính năng lồng nhau trong SASS là một công cụ mạnh mẽ để mô tả ngắn gọn cấu trúc phân cấp của CSS và nâng cao khả năng đọc mã. Tuy nhiên, việc tránh lồng nhau quá mức và tổ chức mã một cách hợp lý là rất quan trọng.

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.

YouTube Video