Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các cách khai báo biến trong Javascript 
Các sự kiện (Event) trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng 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.
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
}div.bg-red nằm trong thẻ div.bgCho 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.
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.
