Bài 07: Nested Selector trong SASS

Đăng bởi: TheHalfHeart - Vào ngày: - View: 2406

Như chúng ta biết hoạt động truy vấn các đối tượng HTML trong CSS sẽ sử dụng cú pháp selector. Nhưng trong một trang HTML việc quản lý các selector đó thực sự rất là rối, vì vậy SASS phải cung cấp cho chúng ta một cách nào đó để quản lý dễ dàng hơn.

1. Nested Selector trong SASS

SASS phân cấp bằng cách sử dụng cặp dấu {} với cú pháp như sau:

selectors {
    // selector bên trong
}

Ví dụ: thiết lập backgroud màu đỏ cho thẻ div.bg-red nằm trong thẻ div.bg

Cho cấu trúc HTML:

<div>
    <div class="bg-red">Nội dung thứ nhất</div>
</div>
<div class="bg">
    <div class="bg-red">Nội dung thứ hai</div>
</div>

Như vậy chỉ có thẻ div.bg-red phía dưới mới có background màu đỏ. Với CSS thông thường thì ta viết như sau:

.bg .bg-red{
    background: red
}

Chuyển qua với SASS thì ta viết như sau: (đương nhiên khi biên dịch thì nó chuyển sang CSS thông thường như trên)

.bg {
    .bg-red{
        background: red;
    }
}

Nếu ban nghĩ dài dòng quá thì đó là sai lầm của bạn đấy. Giả sử có khoảng 100 phần tử con thì nó rất là rõ ràng và mạch lạc.

2. Một ví dụ khác về Nested Selector trong SASS

Cho đoạn mã HTML sau:

<div class="wrapper">
    
    <div id="header">
        <div class="top-menu">
            
        </div>
        <div class="logo">
            
        </div>
        <div class="main-menu">
            
        </div>
    </div>
    
    <div id="content">
        <div class="left-sidebar">
            
        </div>
        <div class="main-content">
            
        </div>
        <div class="right-sidebar">
            
        </div>
    </div>
    
    <div id="footer">
        <div class="copyright">
            
        </div>
        <div class="friend-list">
            
        </div>
    </div>
</div>

Hãy sử dụng Nested Selector phân chia CSS cho đoạn mã trên.

Ta để ý phân ra header, footer, content thành các block chính, sau đó bên trong ta tiếp tục phân chia tùy vào mã HTML và class của thẻ con.

SASS:

.wrapper
{
    #header {
        .top-menu {
            background: red
        }
        
        .logo {
            background: red
        }
        .main-menu {
            background: red
        }
    }
    
    #content {
        .left-sidebar {
            background: red
        }
        
        .main-content {
            background: red
        }
        
        .right-sidebar {
            background: red
        }
    }
    
    #footer {
        .copyright {
            background: red
        }
        
        .friend-list {
            background: red
        }
    }
}

CSS sau khi biên dịch:

.wrapper #header .top-menu {background: red; }
.wrapper #header .logo {background: red; }
.wrapper #header .main-menu {background: red; }
.wrapper #content .left-sidebar {background: red; }
.wrapper #content .main-content {background: red; }
.wrapper #content .right-sidebar {background: red; }
.wrapper #footer .copyright {background: red; }
.wrapper #footer .friend-list {background: red; }

Việc truy vấn selector cấp rõ ràng như thế này giúp cho website hoạt động tốt và tối ưu hơn rất nhiều.

Như vậy việc quản lý code CSS sau này ta chỉ quan tâm đến file SASS nên muốn sửa trên header thì ta vào header để chỉnh sửa, muốn sửa footer thì vào vị trí footer nên sẽ không có sự dư thừa như trước.

3. Lời kết

Vậy là bạn đã hiểu được cách sử dụng Nested Selector trong SASS và đồng thời cũng trả lời luôn câu hỏi tại sao nên sử dụng Nested Selector.

Nguồn: freetuts.net