đề tài tiểu luận về: Sass (Syntactically awesome styleshessts)

SCSS Nhóm 13 1 GIỚI THIỆU • Trước khi nói về SCSS, chúng ta hãy nhìn sơ lược qua SASS • Sass (Syntactically awesome styleshessts) là “bộ tiền xử lý CSS” hay “CSS Preprocessor” - một ngôn ngữ kịch bản mở rộng của CSS và được biên dịch thành cú pháp CSS. • Sass hỗ trợ 2 định dạng (.scss) và (.sass) tương ứng với hai loai cú pháp SCSS và SASS. 2 GIỚI THIỆU • SCSS là cấu trúc mới của SASS. SCSS là 1 tập hợp của các cấu trúc CSS3 (CSS3 là thế hệ mới nhất của CSS hỗ trợ rất nhiều tính năng mới) • Từ các file SCSS sẽ biên dịch ra các file CSS tương ứng (thông qua Ruby Installer) 3 SCSS gọn gàng hơn SCSS linh hoạt hơn SCSS dễ quản lý hơn SCSS có sử dụng biến. Tiết kiệm thời gian hơn do 1 selector không cần phải viết đi viết lại nhiều lần như cách viết css thông thường GIỚI THIỆU Ưu điểm của SCSS so với CSS: 4 Quy tắc xếp chồng (nested rules) Biến (Variables) Mixins Kế thừa (Selector inheritance) … CODE SASS THÔNG DỤNG 5 QUY TẮC XẾP CHỒNG (NESTED RULES) • Là cách để làm giảm bớt các thuộc tính trùng lặp trên CSS bằng cách đồng bộ chúng. • Trong Sass với những thuộc tính như margin, padding, border chúng ta có thể xếp chồng để tránh những khai báo không cần thiết. 6 QUY TẮC XẾP CHỒNG (NESTED RULES) 7 SCSS CSS Sau khi biên dịch sang CSS ta được: 8 SCSS CSS Sau khi biên dịch sang CSS ta được: BIẾN (VARIABLES) • Biến là một trong những tính năng hữu ích mà Sass cung cấp. Với Sass bạn có thể khai báo biến và sử dụng lại chúng khi cần thiết. • Để khai báo một biến :dấu $ đằng trước tên biến. • Vd: $main-color:#5BD672; 9 BIẾN (VARIABLES) 10 SCSS CSS Sau khi biên dịch sang CSS ta được: . nhiều tính năng mới) • Từ các file SCSS sẽ biên dịch ra các file CSS tương ứng (thông qua Ruby Installer) 3 SCSS gọn gàng hơn SCSS linh hoạt hơn SCSS dễ quản lý hơn SCSS có sử dụng biến. Tiết kiệm. cú pháp CSS. • Sass hỗ trợ 2 định dạng ( .scss) và (.sass) tương ứng với hai loai cú pháp SCSS và SASS. 2 GIỚI THIỆU • SCSS là cấu trúc mới của SASS. SCSS là 1 tập hợp của các cấu trúc CSS3. SCSS Nhóm 13 1 GIỚI THIỆU • Trước khi nói về SCSS, chúng ta hãy nhìn sơ lược qua SASS • Sass (Syntactically awesome styleshessts)