Cú pháp viết SCSS

Cú pháp viết SCSS

  • Cú pháp viết SCSS được thiết kế lại từ SASS, hoàn toàn dựa theo cấu trúc của CSS, nhưng được cải tiến linh hoạt hơn.
  • Xem một vài ví dụ mẫu sau đây sẽ giúp bạn hình dung phần nào về cấu trúc SCSS.
SCSS CSS 
tag-cha {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
    tag-con-1 {
        thuộc-tính: giá-trị;
        thuộc-tính: giá-trị;
    }
    tag-con-2 {
        thuộc-tính: giá-trị;
        thuộc-tính: giá-trị;
    }
}
 
tag-cha {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-1 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-2 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
 
tag {
    họ-thuộc-tính: {
        tên-thuộc-tính: giá-trị;
        tên-thuộc-tính: giá-trị;
    }
}
 
tag {
    họ-tên-thuộc-tính: giá-trị;
    họ-tên-thuộc-tính: giá-trị;
}
  • Xem một vài ví dụ mẫu sau đây sẽ giúp bạn hình dung thêm phần nào về cấu trúc SCSS.

Ví dụ về SCSS syntax

SCSS CSS 
.main {
  margin: 0 auto;
  width: 600px;
  .section {
    padding: 20px;
  }
  .info {
    background-color: #ccc;
  }
}
 
.main {
  margin: 0 auto;
  width: 600px;
}
.main .section {
  padding: 20px; 
}
.main .info {
  background-color: #ccc; 
}

body {
  font:{
    family: Arial, sans-serif;
    size: 16px;
  }
}
 
body {
  font-family: Arial, sans-serif;
  font-size: 16px; 
}
  • Giờ thì bạn đã hình dung được cách viết SCSS như thế nào rồi he, khi nào thực tế thì bạn sẽ nắm nó rõ hơn, giờ thì học tiếp các nội dung "linh tinh" liên quan thôi ^^.

SCSS auto compile

SCSS - biến (variable)