Như mình đã nói SASS có những chức năng rất giống với một ngôn ngữ lập trình nên việc hỗ trợ sử dụng biết là quá bình thường. Và trong bài này chúng ta cùng tìm hiểu cách định nghĩa, khai báo và sử dụng một biến trong SASS.
1. Khai báo và sử dụng biến trong SASS
Để khai báo một biến trong SASS thì ta sử dụng cú pháp sau:
$variable-name : value;
Ví dụ: Khai báo biến trong SASS
$color-gray : #333; $color-white : #fff; $color-black : #000;
Những biến này lúc biên dịch sẽ đưa vào đúng vị trí sử dụng trong CSS.
Bài viết này được đăng tại [kiso.vn]
Ví dụ: Sử dụng biến trong SASS
SCSS:
$color-yellow : yellow; $color-red : red; $color-blue : blue; .error{ color: $color-red; } .success{ color: $color-blue; } .warning{ color: $color-yellow; }
CSS sau khi biên dịch:
.error { color: red; } .success { color: blue; } .warning { color: yellow; }
2. Tại sao sử dụng biết trong SASS
Giả sử trong một layout website có nhiều vị trí và mỗi vị trí có một backgroud khác nhau, lúc này nếu viết CSS như trước đây thì mỗi lần đổi background rất khó khăn Vì vậy nếu sử dụng SASS thì chỉ cần tìm đến biến lưu trữ background đó và thay đổi là được.
Cũng có trường hợp nhiều vị trí dùng chung background nên nếu code CSS thông thường thì mỗi lần đổi sẽ phải replace nhiều vị trí. Nhưng nếu sử dụng biến để lưu trữ background thì ta chỉ cần replace đúng một vị trí mà thôi.
Ví dụ: Nhiều selector dùng chung biến
SCSS:
$background-widget : #acacac; .header{ color: #FFF; background-color: $background-widget; } .footer{ color: #333; background-color: $background-widget; }
CSS sau khi biên dịch:
.header { color: #FFF; background-color: #acacac; } .footer { color: #333; background-color: #acacac; }
Ví dụ: Sử dụng biến trong Place Holder và kế thừa
SCSS:
$background-widget : #acacac; %box{ border: solid 1px; background-color: $background-widget; } .header{ @extend %box; color: #FFF; } .footer{ @extend %box; color: #333; }
CSS sau khi biên dịch:
.header, .footer { border: solid 1px; background-color: #acacac; } .header { color: #FFF; } .footer { color: #333; }
3. Lời kết
Như vậy việc sử dụng biến trong SASS rất có lợi cho việc quản lý bảo trì code CSS, và qua bài này bạn đã dần thấy được sức mạnh của SASS rồi đấy nhé. Bài tiếp theo chúng ta sẽ tìm hiểu Nested trong SASS.
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. Khai báo và sử dụng biến trong SASS2....
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chính1. Khai báo và sử dụng biến trong SASS2. Tại sao sử dụng biết 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...
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. Khai báo và sử dụng biến trong SASS2. Tại sao sử dụng biết 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...
Directory traversal vulnerabilities (phần 3)
Nội dung chính1. Khai báo và sử dụng biến trong SASS2. Tại sao sử dụng biết 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...
Directory traversal vulnerabilities (phần 2)
Nội dung chính1. Khai báo và sử dụng biến trong SASS2. Tại sao sử dụng biết 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...