Quy tắc và thuộc tính nhúng Sass

Quy tắc nhúng Sass

Sass cho phép bạn nhúng bộ lọc CSS theo cách tương tự như HTML.

Xin xem ví dụ mã Sass của hướng dẫn trang web này:

Cú pháp SCSS:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Lưu ý rằng trong Sass,ul、li và a bộ lọc nhúng trong nav trong bộ lọc chọn.

Trong CSS, quy tắc được định nghĩa một cách rõ ràng (không nhúng):

Cú pháp CSS:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Vì bạn có thể nhúng thuộc tính trong Sass, vì vậy nó rõ ràng và dễ đọc hơn CSS tiêu chuẩn.

Thuộc tính nhúng Sass

Nhiều thuộc tính CSS có cùng tiền tố, ví dụ:

• font-family
• font-size
• font-weight
• text-align
• text-transform
• text-overflow

Bằng cách sử dụng Sass, bạn có thể viết chúng dưới dạng thuộc tính nhúng:

Cú pháp SCSS:

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}
text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

Biến dịch Sass sẽ chuyển đổi mã trên thành CSS thông thường:

CSS xuất ra:

font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
text-transform: lowercase;
text-overflow: hidden;