đề 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:
11
SCSS
CSS
Sau khi biên dịch sang CSS ta được:
•
@mixin tên_mixin
Tạo mixin
•
@include tên_mixin
Gọi mixin
bằng cách
sử dụng
MIXINS
•

Công dụng là mang nhiều thuộc tính mà đã
quy ước trong một mix nào đó bỏ vào một
thành phần bất kỳ mà không cần phải viết lại
các thuộc tính đó.
12
MIXINS
13
14
Sau khi biên dịch sang CSS ta được:
KẾ THỪA
(SELECTOR INHERITANCE)
•
Đây là một tính năng quan trọng trong khi
làm việc với một CSS Framework. Tính năng
kế thừa này nghĩa là chỉ định cho một thành
phần nào đó thừa hưởng tất cả các thuộc tính
của một class (hoặc vùng chọn nào đó) bất kỳ
mà đã khai báo sẵn.
15
KẾ THỪA
(SELECTOR INHERITANCE)
•
Đây là tính năng giúp sử dụng lại nhiều thuộc
tính khai báo trong CSS.
•
Sử dụng @extend
16
KẾ THỪA
(SELECTOR INHERITANCE)
17

SCSS CSS
Sau khi biên dịch sang CSS ta được:
DEMO
18
Thank you!
19