SCSS nesting

SCSS nesting

  • SCSS nesting là cấu trúc viết gọn theo dạng phân cấp, giúp dễ dàng kiểm soát thành phần con thuộc thành phần cha nào rất tiện lợi.
  • Ngoài ra còn giúp kiểm soát code của thành phần theo các dạng màn hình khá tốt.
  • Đây cũng là cấu trúc được giới thiệu ở bài cú pháp SCSS.

Ví dụ SCSS nesting - theo tag

  • Phân cấp cha con, thành phần bên trong sẽ là thành phần con.
SCSS CSS 
section {
    width: 300px;
    h2 {
        font-size: 12px;
    }
    div {
        padding: 20px;
    }
}
 
section {
    width: 300px;
}
section h2 {
    font-size: 12px;
}
section div {
    padding: 20px;
}
 
#main {
    width: 300px;
    h2 {
        font-size: 12px;
    }
    .list {
        padding: 20px;
        li {
            background-color: #f1f1f1;
        }
    }
}
 
#main {
    width: 300px;
}
#main h2 {
    font-size: 12px;
}
#main .list {
    padding: 20px;
}
#main .list li {
    background-color: #f1f1f1;
}

Ví dụ SCSS nesting - đại diện

  • Ký tự & sẽ đại diện cho thành phần cha bên ngoài gần nhất.
SCSS CSS 
.btn-submit {
    width: 100px;
    background-color: red;
    &:hover {
        background-color: blue;
    }
}
 
.btn-submit {
    width: 100px;
    background-color: red; 
}
.btn-submit:hover {
    background-color: blue; 
}
 
.list {
    margin-bottom: 20px;
    &.list-last {
        margin-bottom: 0;
    }
}
 
.list {
    margin-bottom: 20px;
}
.list.list-last {
    margin-bottom: 0;
}

.list {
    li {
        float: left;
        margin-right: 10px;
        &:last-child {
            margin-right: 0;
        }
    }
}
 
.list li {
    float: left;
    margin-right: 10px;
}
.list li:last-child {
    margin-right: 0;
}

Ví dụ SCSS nesting - thuộc tính

  • Các thuộc tính có tiền tố giống nhau, có thể được gom chung với nhau.
  • Một số thuộc tính có tiền tố giống nhau thường dùng:
    • font-
    • margin-
    • padding-
    • text-
    • background-
    • border-
    • ...
SCSS CSS 
section {
    width: 300px;
    font: {
        family: Arial, sans-serif;
        size: 16px;
    }
    h2 {
        font-size: 20px;
    }
    div {
        padding: 20px;
    }
}
 
section {
    width: 300px;
    font-family: Arial, sans-serif;
    font-size: 16px;
}
section h2 {
    font-size: 20px;
}
section div {
    padding: 20px;
}

Ví dụ SCSS nesting - @media

  • @media được sử dụng bên trong thành phần nào thì sẽ sử dụng cho thành phần đó.
SCSS CSS 
#main {
  width: 300px;
  @media only screen and (min-width: 641px) {
    width: 200px;
  }
}
 
#main {
  width: 300px;
}
@media only screen and (min-width: 641px) {
  #main {
    width: 200px;
  }
}

SCSS - toán tử (oparator)

SCSS - kế thừa thuộc tính (@extend)