Code CSS chuyên nghiệp và đơn giản hơn với SASS - Phần 1
Bài đăng này đã không được cập nhật trong 6 năm
Dù bạn có là một Dev back-end thì khiên thức về html, css, js là những thứ không thể thiếu nếu bạn muốn làm dự án về webapp Ở bài viết này mình xin tóm lượt về SASS và các cú pháp đơn giản để có thể nắm rỏ hơn cách làm việc của nó.
Khái niệm
SASS là một CSS Processor hỗ trợ trong việc quản lý code CSS, đây là một thư viện khá hay mà bạn nên sử dụng để quản lý source code của mình. Code của SASS rất giống với một ngôn ngữ lập trình nên nó ngắn gọn và trong sáng, vì vậy những dự án lớn sử dụng nó sẽ rất có lợi. Khi sử dụng SASS thì trình duyệt sẽ không hiểu được nên ta phải thông qua giai đoạn biên dịch file SASS thành file CSS và công việc này đòi hỏi ta phải cài đặt một phần mềm thứ ba (Đối với các dự án Ruby on Rails bạn có thể tham khảo 2 gem này: "sass-rails" và "bootstrap-sass").
SASS có hai loại chính đó là SASS thuần và SCSS. SCSS là một phiên bản mới của SASS với cú pháp có phần giống với CSS hơn giúp cho người dùng có thể có cái nhìn trực quan hơn tuy phải code dài hơn SASS một tí(Tất nhiên là vẫn ngắn gọn và đơn giản hơn css rất nhiều 
). Với bài viết này thì mình xin hướng dẫn các bạn theo cách viết SCSS để giúp các bạn dễ hiểu hơn.
Ví dụ: Ví dụ mình có 1 file css thuần như bên dưới:
#input.css
.hinh-vuong {
width: 100px;
height: 100px;
background-color: blue;
box-shadow: 1px 1px 1px 1px #bf0000;
}
.hinh-vuong .mau-chu {
size: 14px;
text-align: center;
}
.hinh-vuong .mau-chu .dong-1 {
color: #bf0000;
text-align: left;
}
.hinh-vuong .mau-chu .dong-2 {
color: #bf0000;
}
.hinh-vuong .mau-chu .dong-3 {
color: red;
font-size: 20px;
font-style: italic;
}
.hinh-tron {
width: 100px;
height: 100px;
border-radius: 100px;
background-color: blue;
box-shadow: 1px 1px 1px 1px #5f7709;
}
.hinh-tron .mau-chu {
size: 13px;
text-align: center;
}
.hinh-tron .mau-chu .dong-1 {
color: #5f7709;
text-align: right;
}
.hinh-tron .mau-chu .dong-2 {
color: #5f7709;
}
.hinh-tron .mau-chu .dong-3 {
color: red;
font-size: 20px;
font-style: italic;
}
Quy tắc xếp chồng (Nested Rules)
Với quy tắt này mình có thể viết file css trên dưới dạng scss như sau
#output-1.scss
.hinh-vuong {
width: 100px;
height: 100px;
background-color: #b3b3b3;
box-shadow: 1px 1px 1px 1px #bf0000;
.mau-chu {
size: 14px;
text-align: center;
.dong-1 {
color: #bf0000;
text-align: left;
}
.dong-2 {
color: #bf0000;
}
.dong-3 {
color: red;
font-size: 20px;
font-style: italic;
}
}
}
.hinh-tron {
width: 100px;
height: 100px;
border-radius: 100px;
background-color: blue;
box-shadow: 1px 1px 1px 1px #5f7709;
.mau-chu {
size: 13px;
text-align: center;
.dong-1 {
color: #5f7709;
text-align: right;
}
.dong-2 {
color: #5f7709;
}
.dong-3 {
color: red;
font-size: 20px;
font-style: italic;
}
}
}
Với quy tắt này các class con chỉ cần đặt trong class cha mà không cần phải viết lại class cha như cách truyền thống
Sử dụng biến (Varibles)
Với quy tắt này mình có thể viết file output-1.css như sau:
#output-2.scss
$mau-nau-do: #bf0000;
$mau-xanh-chuoi: #5f7709;
$kich-thuoc: 100px;
.hinh-vuong {
width: $kich-thuoc;
height: $kich-thuoc;
background-color: blue;
box-shadow: 1px 1px 1px 1px $mau-nau-do;
.mau-chu {
size: 14px;
text-align: center;
.dong-1 {
color: $mau-nau-do;
text-align: left;
}
.dong-2 {
color: $mau-nau-do;
}
.dong-3 {
color: red;
font-size: 20px;
font-style: italic;
}
}
}
.hinh-tron {
width: $kich-thuoc;
height: $kich-thuoc;
border-radius: $kich-thuoc;
background-color: blue;
box-shadow: 1px 1px 1px 1px $mau-xanh-chuoi;
.mau-chu {
size: 13px;
text-align: center;
.dong-1 {
color: $mau-xanh-chuoi;
text-align: right;
}
.dong-2 {
color: $mau-xanh-chuoi;
}
.dong-3 {
color: red;
font-size: 20px;
font-style: italic;
}
}
}
Quy tắc Mixin
Nhận thấy cả 2 class hình vuông và hình tròn đều có class con dong-3 giống nhau, class dong-1 củng có 2 style giống nhau nhưng khác value. để viết gọn hơn và thay có thể chỉnh sửa cùng lúc cho các class này thì cơ chế mixin sẻ giải quyết điều này. Chúng ta có thể viết lại như sau
#output-3.scss
$mau-nau-do: #bf0000;
$mau-xanh-chuoi: #5f7709;
$kich-thuoc: 100px;
@mixin dong-3-dung-chung {
color: red;
font-size: 20px;
font-style: italic;
}
@mixin dong-1($color, $text) {
color: $color;
text-align: $text;
}
.hinh-vuong {
width: $kich-thuoc;
height: $kich-thuoc;
background-color: blue;
box-shadow: 1px 1px 1px 1px $mau-nau-do;
.mau-chu {
size: 14px;
text-align: center;
.dong-1 {
@include dong-1($mau-nau-do, left);
}
.dong-2 {
color: $mau-nau-do;
}
.dong-3 {
@include dong-3-dung-chung;
}
}
}
.hinh-tron {
width: $kich-thuoc;
height: $kich-thuoc;
border-radius: $kich-thuoc;
background-color: blue;
box-shadow: 1px 1px 1px 1px $mau-xanh-chuoi;
.mau-chu {
size: 13px;
text-align: center;
.dong-1 {
@include dong-1($mau-xanh-chuoi, right);
}
.dong-2 {
color: $mau-xanh-chuoi;
}
.dong-3 {
@include dong-3-dung-chung;
}
}
}
Quy tắc Kế thừa
Quy tắc này cho phép chúng ta có kể kế thừa toàn bộ style của bất kỳ class nào làm style của chính mình. Ví dụ ta có thêm class .do-bong-chu và trong class .hinh-vuong, .hinh-tron ta muốn kế thừa class .do-bong-chu cho class .dong-2 thì ta có thể viết như sau.
#output-4.scss
$mau-nau-do: #bf0000;
$mau-xanh-chuoi: #5f7709;
$kich-thuoc: 100px;
@mixin dong-3-dung-chung {
color: red;
font-size: 20px;
font-style: italic;
}
@mixin dong-1($color, $text) {
color: $color;
text-align: $text;
}
.do-bong-chu {
text-shadow: 1px 1px 1px;
}
.hinh-vuong {
width: $kich-thuoc;
height: $kich-thuoc;
background-color: blue;
box-shadow: 1px 1px 1px 1px $mau-nau-do;
.mau-chu {
size: 14px;
text-align: center;
.dong-1 {
@include dong-1($mau-nau-do, left);
}
.dong-2 {
color: $mau-nau-do;
@extend .do-bong-chu;
}
.dong-3 {
@include dong-3-dung-chung;
}
}
}
.hinh-tron {
width: $kich-thuoc;
height: $kich-thuoc;
border-radius: $kich-thuoc;
background-color: blue;
box-shadow: 1px 1px 1px 1px $mau-xanh-chuoi;
.mau-chu {
size: 13px;
text-align: center;
.dong-1 {
@include dong-1($mau-xanh-chuoi, right);
}
.dong-2 {
color: $mau-xanh-chuoi;
@extend .do-bong-chu;
}
.dong-3 {
@include dong-3-dung-chung;
}
}
}
Sau khi biên dịch file này ra file css chúng ta sẻ có 3 class .do-bong-chu, .dong-2 của class .hinh-tron và .dong-2 của class .hinh-vuong đều có style trong class .do-bong-chu
Quy tắc Vùng chọn
Như ví dụ trên nếu chúng ta muốn class .do-bong-chu không được biên dịch ra, chỉ cho phép biên dịch khi được kế thừa thì quy tắt Vùng chọn sẻ giúp chúng ta giải quyết điều này.
#output-5.scss
$mau-nau-do: #bf0000;
$mau-xanh-chuoi: #5f7709;
$kich-thuoc: 100px;
@mixin dong-3-dung-chung {
color: red;
font-size: 20px;
font-style: italic;
}
@mixin dong-1($color, $text) {
color: $color;
text-align: $text;
}
%do-bong-chu {
text-shadow: 1px 1px 1px;
}
.hinh-vuong {
width: $kich-thuoc;
height: $kich-thuoc;
background-color: blue;
box-shadow: 1px 1px 1px 1px $mau-nau-do;
.mau-chu {
size: 14px;
text-align: center;
.dong-1 {
@include dong-1($mau-nau-do, left);
}
.dong-2 {
color: $mau-nau-do;
@extend %do-bong-chu;
}
.dong-3 {
@include dong-3-dung-chung;
}
}
}
.hinh-tron {
width: $kich-thuoc;
height: $kich-thuoc;
border-radius: $kich-thuoc;
background-color: blue;
box-shadow: 1px 1px 1px 1px $mau-xanh-chuoi;
.mau-chu {
size: 13px;
text-align: center;
.dong-1 {
@include dong-1($mau-xanh-chuoi, right);
}
.dong-2 {
color: $mau-xanh-chuoi;
@extend %do-bong-chu;
}
.dong-3 {
@include dong-3-dung-chung;
}
}
}
Sau khi biên dịch file này sang file css chỉ có 2 class có style đổ bóng đó là class .dong-2 của class .hinh-tron và .hinh-vuong
Ở bài viết tiếp theo mình sẻ giới thiệu các mệnh đề điều kiện và cách viết của nó. Mọi người ai quan tâm thì chờ đón đọc phần tiếp theo nhé.
Nếu bài viết có gì sai sót, mình rất mong mọi người đóng góp ý kiến trực tiếp để các bài viết tiếp theo của mình được hoàn thiện hơn. Cảm ơn rất nhiều. 
Mời các bạn đón đọc phần 2 tại đây.
All rights reserved
