Hướng dẫn scss syntax - cú pháp scss
Cú pháp viết SCSS
Ví dụ về SCSS syntax
Hướng dẫn học SCSS, nội dung bài học đơn giản, khoa học giúp bạn cài đặt, tự động thực thi file CSS chỉ với thao tác save, giúp bạn làm quen với các nội dung của SCSS một cách nhanh chóng và dễ hiểu nhất.
Bắt đầu học SCSS thôi Khi viết code Sass với cú pháp SCSS hãy bắt đấu viết những gì mong muốn như từng viết CSS, trong quá trình đó ta sẽ tìm hiểu những tính năng mở rộng áp dụng vào các khối code tag { họ-thuộc-tính: { tên-thuộc-tính: giá-trị; tên-thuộc-tính: giá-trị; } }9SCSS hãy bắt đấu viết những gì mong muốn như từng viết CSS, trong quá trình đó ta sẽ tìm hiểu những tính năng mở rộng áp dụng vào các khối code tag { họ-thuộc-tính: { tên-thuộc-tính: giá-trị; tên-thuộc-tính: giá-trị; } }9 Các biến trong SCSSCú pháp khai báo biến: $tenbien: giatri; Biến khai báo bắt đầu bằng ký hiệu dollar ( tag { họ-tên-thuộc-tính: giá-trị; họ-tên-thuộc-tính: giá-trị; }0) và nối tiếp là các ký tự tên biến, kết thúc tên biến là ký hiệu tag { họ-tên-thuộc-tính: giá-trị; họ-tên-thuộc-tính: giá-trị; }1, sau dấu tag { họ-tên-thuộc-tính: giá-trị; họ-tên-thuộc-tính: giá-trị; }1 là giá trị nào đó gán vào biết và kết thúc bởi tag { họ-tên-thuộc-tính: giá-trị; họ-tên-thuộc-tính: giá-trị; }3. Ví dụ sau khai báo biến tag { họ-tên-thuộc-tính: giá-trị; họ-tên-thuộc-tính: giá-trị; }4, giá trị biến đó giữ là mã màu tag { họ-tên-thuộc-tính: giá-trị; họ-tên-thuộc-tính: giá-trị; }5 $red: #dd0000; Sử dụng biến Khi nào muốn sử dụng giá trị của biến, trong code SCSS chỉ việc gọi lại tên biến, tại vị trí gọi đó tên biến sẽ thay thế bởi giá trị của biến. Ví dụ: $red: #dd0000; .box { color: $red; //Gán thuộc tính bằng giá trị từ biến $red border: 1px solid $red; //Gán thuộc tính bằng giá trị từ biến $red } Kết quả CSS sinh ra 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ị; }0 Khi sử dụng biến để viết SCSS, chúng ta có thể nhanh chóng thay đổi thuộc tính của rất nhiều phần tử CSS có sử dụng đến giá trị biến Nguyên lý lồng nhau trong SCSS (Nesting)Như đã biết trong tag { họ-tên-thuộc-tính: giá-trị; họ-tên-thuộc-tính: giá-trị; }6 có thể thiết lập đến các phần tử con bằng cách viết tag { họ-tên-thuộc-tính: giá-trị; họ-tên-thuộc-tính: giá-trị; }7 phù hợp, trong SCSS có thể viết theo cách đúng như vậy, ngoài ra có thể đặt phần tử con bên trong khối tag { họ-tên-thuộc-tính: giá-trị; họ-tên-thuộc-tính: giá-trị; }8 phần tử cha, nó cũng sinh ra CSS theo mối quan hệ cha con phù hợp, việc đó chính là sự lồng nhau (Nesting Ví dụ tag { họ-tên-thuộc-tính: giá-trị; họ-tên-thuộc-tính: giá-trị; }6 định dạng phần tử .main { margin: 0 auto; width: 600px; .section { padding: 20px; } .info { background-color: #ccc; } }0 có lớp .main { margin: 0 auto; width: 600px; .section { padding: 20px; } .info { background-color: #ccc; } }1, sau đó định dạng các phần tử con .main { margin: 0 auto; width: 600px; .section { padding: 20px; } .info { background-color: #ccc; } }2 chứa bên trong nó. Bạn thấy ký hiệu .main { margin: 0 auto; width: 600px; .section { padding: 20px; } .info { background-color: #ccc; } }3 cho biết .main { margin: 0 auto; width: 600px; .section { padding: 20px; } .info { background-color: #ccc; } }2 thiết lập là phần tử con của .main { margin: 0 auto; width: 600px; .section { padding: 20px; } .info { background-color: #ccc; } }5, nếu vậy trong tag { họ-thuộc-tính: { tên-thuộc-tính: giá-trị; tên-thuộc-tính: giá-trị; } }9 chỉ việc đặt .main { margin: 0 auto; width: 600px; .section { padding: 20px; } .info { background-color: #ccc; } }2 bên trong .main { margin: 0 auto; width: 600px; .section { padding: 20px; } .info { background-color: #ccc; } }5 để có kết quả tương tự, viết như phần bên phải 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ị; }1 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ị; }2 Phần tử con cấp 1 của phần tử cha, ký hiệu & Ký hiệu .main { margin: 0 auto; width: 600px; .section { padding: 20px; } .info { background-color: #ccc; } }9 ở phía trước, ví dụ: 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ị; }3 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ị; }4 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ị; }5 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ị; }6 Ký hiệu & áp dụng tương tự cho Như đã biết các .main { margin: 0 auto; width: 600px; } .main .section { padding: 20px; } .main .info { background-color: #ccc; }1 là định nghĩa một phần của phần tử, trong tag { họ-tên-thuộc-tính: giá-trị; họ-tên-thuộc-tính: giá-trị; }6 đã biết có các .main { margin: 0 auto; width: 600px; } .main .section { padding: 20px; } .main .info { background-color: #ccc; }1 cho class như: .main { margin: 0 auto; width: 600px; } .main .section { padding: 20px; } .main .info { background-color: #ccc; }5, .main { margin: 0 auto; width: 600px; } .main .section { padding: 20px; } .main .info { background-color: #ccc; }6, .main { margin: 0 auto; width: 600px; } .main .section { padding: 20px; } .main .info { background-color: #ccc; }7, .main { margin: 0 auto; width: 600px; } .main .section { padding: 20px; } .main .info { background-color: #ccc; }8, .main { margin: 0 auto; width: 600px; } .main .section { padding: 20px; } .main .info { background-color: #ccc; }9 ... (Xem chi tiết tại pseudo selector) Trong body {
font:{
family: Arial, sans-serif;
size: 16px;
}
} 0 thì để khai báo các body {
font:{
family: Arial, sans-serif;
size: 16px;
}
} 1 này dùng đến ký hiệu body {
font:{
family: Arial, sans-serif;
size: 16px;
}
} 2, ví dụ sau gạch chân đường link khi hover chuột, khi activetag-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ị; }7 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ị; }8 Một cách áp dụng lựa chọn phần tử cha & nữa như sau: bổ xung thêm tính chất cho loại phần tử cha lồng vào trong phần tử con 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ị; }9 tag { họ-thuộc-tính: { tên-thuộc-tính: giá-trị; tên-thuộc-tính: giá-trị; } }0 Một cách tiện lợi nữa đó là ký hiệu phần tử cha body {
font:{
family: Arial, sans-serif;
size: 16px;
}
} 3 được dùng như là một thành phần tên của phần tử con. Ví dụ sau ký hiệu body {
font:{
family: Arial, sans-serif;
size: 16px;
}
} 4 tự động sinh ra phần tử body {
font:{
family: Arial, sans-serif;
size: 16px;
}
} 5tag { họ-thuộc-tính: { tên-thuộc-tính: giá-trị; tên-thuộc-tính: giá-trị; } }1 tag { họ-thuộc-tính: { tên-thuộc-tính: giá-trị; tên-thuộc-tính: giá-trị; } }2 Lồng nhau về thuộc tính CSSNguyên lý lồng nhau ở trên cũng áp dụng cho nhiều thuộc tính có cùng tiền tố, trong CSS có rất nhiều thuộc tính mà tiền tố giống nhau ví dụ vài tiền tố như:
Với các thuộc tính này có thể viết trong $red: #dd0000;5 bằng cách chỉ ra tiền tố $red: #dd0000;6 (nhớ dấu tag { họ-tên-thuộc-tính: giá-trị; họ-tên-thuộc-tính: giá-trị; }1 sau tiền tố rồi đến tag { họ-tên-thuộc-tính: giá-trị; họ-tên-thuộc-tính: giá-trị; }8), và các hậu tố bên trong tag { họ-tên-thuộc-tính: giá-trị; họ-tên-thuộc-tính: giá-trị; }8, ví dụ: tag { họ-thuộc-tính: { tên-thuộc-tính: giá-trị; tên-thuộc-tính: giá-trị; } }3 tag { họ-thuộc-tính: { tên-thuộc-tính: giá-trị; tên-thuộc-tính: giá-trị; } }4 Sử dụng lại mã SCSS với @extendTrong SCSS có một phần tử lớp là $red: #dd0000; .box { color: $red; //Gán thuộc tính bằng giá trị từ biến $red border: 1px solid $red; //Gán thuộc tính bằng giá trị từ biến $red }0 thì có thể áp tất cả các thuộc tính của phần tử đó vào phần tử khác bằng cú pháp $red: #dd0000; .box { color: $red; //Gán thuộc tính bằng giá trị từ biến $red border: 1px solid $red; //Gán thuộc tính bằng giá trị từ biến $red }1 tag { họ-thuộc-tính: { tên-thuộc-tính: giá-trị; tên-thuộc-tính: giá-trị; } }5 tag { họ-thuộc-tính: { tên-thuộc-tính: giá-trị; tên-thuộc-tính: giá-trị; } }6 Giữ chỗ placeholder và sử dụng lại với @extendỞ ví dụ trên có sử dụng lại thuộc tính khai báo trong phần tử lớp $red: #dd0000; .box { color: $red; //Gán thuộc tính bằng giá trị từ biến $red border: 1px solid $red; //Gán thuộc tính bằng giá trị từ biến $red }2, lưu ý rằng khai báo như vậy thì trong mã tag { họ-tên-thuộc-tính: giá-trị; họ-tên-thuộc-tính: giá-trị; }6 có sinh ra lớp $red: #dd0000; .box { color: $red; //Gán thuộc tính bằng giá trị từ biến $red border: 1px solid $red; //Gán thuộc tính bằng giá trị từ biến $red }2, trong nhiều trường hợp chỉ muốn khai báo các thuộc tính và sử dụng lại với $red: #dd0000; .box { color: $red; //Gán thuộc tính bằng giá trị từ biến $red border: 1px solid $red; //Gán thuộc tính bằng giá trị từ biến $red }5 chứ không cần có sinh ra một lớp gốc thì sử dụng kỹ thuật giữ chỗ $red: #dd0000; .box { color: $red; //Gán thuộc tính bằng giá trị từ biến $red border: 1px solid $red; //Gán thuộc tính bằng giá trị từ biến $red }6 bằng cách khai báo sử dụng ký hiệu $red: #dd0000; .box { color: $red; //Gán thuộc tính bằng giá trị từ biến $red border: 1px solid $red; //Gán thuộc tính bằng giá trị từ biến $red }7, xem ví dụ sau: tag { họ-thuộc-tính: { tên-thuộc-tính: giá-trị; tên-thuộc-tính: giá-trị; } }7 tag { họ-thuộc-tính: { tên-thuộc-tính: giá-trị; tên-thuộc-tính: giá-trị; } }8 Mã tag { họ-tên-thuộc-tính: giá-trị; họ-tên-thuộc-tính: giá-trị; }6 không có sinh ra một phần tử lớp $red: #dd0000; .box { color: $red; //Gán thuộc tính bằng giá trị từ biến $red border: 1px solid $red; //Gán thuộc tính bằng giá trị từ biến $red }2 nữa |