SASS P4 – Import – Partial – Media – Extend

1. Import & Partial

In fact, when we code scss, we often split into files that perform different functions such as _colors.scss hay_variables.scss then use keyword @import to call in.

File style.scss để import 2 file ở trên ta viết code như sau

Kết quả

Lưu ý

• 3 file ở trên nằm cùng cấp ngang hàng với nhau
• Khi import việc ghi cả đuôi file scss là không cần thiết
• Ta thấy 2 file _colors.scss và _variables.scss có gạch dưới ở phía trước, đó là cách dùng của Partial, điều này có nghĩa SASS sẽ không biên dịch các file đó ra file css

2. Media

Cách viết @media tương tự như viết của CSS, thường dùng khi responsive website

3. Extend

Kế thừa các thuộc tính của một selector khác. Sử dụng từ khóa @extend

Kết quả

Vùng chọn %extend sẽ chỉ kế thừa các thuộc tính mà không compile.

Kết quả