Như một ngôn ngữ lập trình, SASS cho phép chúng kế thừa lẫn nhau và khi biên dịch nó sẽ tự động gắn từng selector theo đúng khuôn khổ của nó.
Hãy chắc chắn rằng bạn đã cài đặt SASS và cấu hình SASS trên Netbeans nhé.
1. Kế thừa @extend trong SASS
Note: Để tiện cho việc viết tuts thì chúng ta gọi mỗi block CSS là một selector nhé các bạn.
Extend trong SASS được dùng trong trường hợp bạn muốn một selector sử dụng lại những thuộc tính của selector khác, chúng có thể kế thừa một cấp hoặc nhiều cấp đều được.
Bài viết này được đăng tại [kiso.vn]
Ví dụ: Selector kế thừa một cấp
SCSS:
.floatLeft{ float: left; width: 50%; } .columnLeft{ @extend .floatLeft; backgroud: #ffffff; }
CSS sau khi biên dịch:
.floatLeft, .columnLeft { float: left; width: 50%; } .columnLeft { backgroud: #ffffff; }
Bạn thấy vì lớp .columnLeft
kế thừa .floatLeft
nên khi biên dịch .columnLeft
sẽ được thêm vào selelector .floatLef
t (chung CSS).
Ví dụ: Selector kế thừa nhiều cấp
SCSS:
.floatLeft{ float: left; width: 50%; } .columnLeft{ @extend .floatLeft; backgroud: #ffffff; } .boxLeft{ @extend .columnLeft; color: #000; }
CSS sau khi biên dịch:
.floatLeft, .columnLeft, .boxLeft { float: left; width: 50%; } .columnLeft, .boxLeft { backgroud: #ffffff; } .boxLeft { color: #000; }
Hãy tự suy nghĩ để hiểu nguyên lý của nó nhé.
2. Một ví dụ thực tế về Extend trong SASS
Giả sử chúng ta cần tạo CSS cho ba loại thông báo gồm error, sucesss, warning. Lúc này phân tích ra ta thấy chúng có chung một cách hiển thị và chỉ khác màu nền nên ta sẽ tạo một class .message
chứa CSS chung và các class .error
, .success
, .warning
sẽ kế thừa .message
.
SCSS:
.message{ border: solid 1px; text-align: center; font-size: 16px; padding: 20px 10px; } .error{ @extend .message; background: red; } .success{ @extend .message; background: blue; } .warning{ @extend .message; background: yellow; }
CSS sau khi biên dịch:
.message, .error, .success, .warning { border: solid 1px; text-align: center; font-size: 16px; padding: 20px 10px; } .error { background: red; } .success { background: blue; } .warning { background: yellow; }
3. Lời kết
Vậy là mình giới thiệu xong chức năng kế thừa Extend trong Sass, bài tiếp theo chúng ta sẽ tìm hiểu về Place Holder và kết hợp với extend để bỏ đi những phần select không cần thiết khi biên dịch.
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chính1. Kế thừa @extend trong SASS2. Một ví dụ...
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chính1. Kế thừa @extend trong SASS2. Một ví dụ thực tế về Extend trong SASS3. Lời kết1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chính1. Kế thừa @extend trong SASS2. Một ví dụ thực tế về Extend trong SASS3. Lời kếtV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi...
Directory traversal vulnerabilities (phần 3)
Nội dung chính1. Kế thừa @extend trong SASS2. Một ví dụ thực tế về Extend trong SASS3. Lời kếtV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi...
Directory traversal vulnerabilities (phần 2)
Nội dung chính1. Kế thừa @extend trong SASS2. Một ví dụ thực tế về Extend trong SASS3. Lời kếtIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau,...