Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các cách khai báo biến trong Javascript 
Các sự kiện (Event) trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Bài 06: Khai báo và sử dụng biến trong SASS
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;
$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 [free tuts .net]
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.
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;
}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.
