Bài 07: Nested Selector trong SASS

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.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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:

Bài viết này được đăng tại [free tuts .net]

.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.