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

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

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

Sau khi biên dịch sang CSS ta được:

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

Sau khi biên dịch sang CSS ta được:

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

13

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

Sau khi biên dịch sang CSS ta được:

18

Thank you!

19