SASS là gì?

SASS – hẳn là một thuật ngữ khá quen thuộc đối với dân lập trình, nhưng trước khi hiểu sâu về SASS thì chúng ta cần ôn lại kiến thức CSS trước đã.

Thuật ngữ CSS chắc hẳn không còn gì xa lạ đối với dân lập trình nữa, dù mảng chuyên môn của bạn là gì đi nữa thì ít nhiều vẫn sẽ biết hoặc đã từng học qua CSS cơ bản. CSS không hẳn là một mảng quá khó trong lập trình nhưng nó khá tẻ nhạt, khô khan và dễ chán. 

“Ơn giời” ngoài CSS thì SASS và SCSS đã ra đời để tối ưu hóa hiệu quả, tiết kiệm thời gian và giảm đi sự khô khan của CSS. Phần này mình sẽ tập trung chia sẻ tất tần tật về SASS nhé!

Ngôn ngữ CSS là gì?

Các ngôn ngữ đánh dấu như HTML sẽ cung cấp một dàn bài đầy đủ, nhưng CSS sẽ là ngôn ngữ giúp dàn bài ấy trở nên thu hút hơn nhờ bố cục, hình ảnh, font chữ, màu sắc và cách trình bày. Có thể hiểu người ta dùng CSS để định hình phong cách cho Website và biến một nền tảng lập trình HTML đơn điệu thành một trang Web thu hút hơn giúp tăng chỉ số UX của Web.

Hiểu rõ khái niệm SASS là gì?

Đừng đặt nặng hay suy nghĩ quá phức tạp về nó, thực chất, đây là bộ tiền xử lý cũng như ngôn ngữ lập trình dùng để hỗ trợ cho nền tảng cơ bản CSS. Nhờ nó bạn sẽ có thể sắp xếp ngôn ngữ của CSS một cách dễ dàng và gọn gàng hơn bao giờ hết, đồng thời bạn cũng sẽ quản lý nhiều tệp biến đã định nghĩa sẵn từ trước. Ngoài ra. SASS khá hữu ích trong việc giúp bạn tiết kiệm dung lượng vì nó sẽ tự động nén tệp CSS lại.

Hướng dẫn cú pháp SASS cơ bản:

Ngôn ngữ Sass có hai sự lựa chọn cú pháp tùy theo nhu cầu lập trình của bạn:

SASS (Indented): Có sự khác biệt khá rõ ràng với CSS vì ở SASS chú trọng việc thụt lề để định nghĩa chứ không phải giống CSS là sử dụng dấu ngoặc. Bạn có thể chuyển đổi cứ pháp từ CSS sang SASS và ngược lại bằng lệnh sass-convert (chuyển đổi)

SCSS (Sassy CSS): có đến 90% đồng dạng và tuân thủ theo cú pháp ngôn ngữ CSS nhưng được mở rộng ra 1 chút.

Lợi ích của SASS ứng dụng lên CSS

Điểm ấn tượng đầu tiên của SASS lên CSS đó là nó tiện dụng cho việc đánh máy và nó ngắn hơn ngôn ngữ CSS thông thường. Nó thậm chí chỉ cần sử dụng rất ít những kí tự được xem là bắt buộc của CSS như dấu ngoặc nhọn ({}) và dấu chấm phẩy (;) để viết. Nó tiện dụng đến mức bạn chỉ cần dấu hai chấm (:) và dấu cộng (+) là đủ mà có thế không cần đến @mixin hay @include nào cả. 

Tuy ở ngôn ngử này còn có những lưu ý bắt buộc là khi viết code phải chủ động ghi nhớ thụt đầu dòng (vì thế dân lập trình hay truyền miệng vui nhau rằng SASS là ngôn ngữ “thụt dòng”) nhưng nó cũng khá tiện lợi cho với việc sử dụng mãi những ký tự dễ type nhầm như {, }, ; đấy. 

Ngoài ra, do SASS có tính mạch lạc, rõ ràng khá cao nên ngôn ngữ của SASS cũng đồng dạng yêu cầu sự rõ ràng này khi lập trình, ví dụ điển hình là bạn phải đảm bảo không được quên thụt đầu dòng, code thật rõ và lưu ý phải định dạng tốt ngôn ngữ nếu không bạn có thể không hoàn thành được tệp.

Chưa hết đâu nhé! Thậm chí khi sử dụng Sass các bạn sẽ có thể cải thiện được nhược điểm từ trước của CSS về các:

Variable

Các lập trình viên thường sử dụng các Variable (biến) nhằm lưu trữ và tái sử dụng lại tài nguyên. Với cách này, lập trình viên có thể tùy ý tái sử dụng bất kỳ tài nguyên CSS có sẵn nào bằng ký pháp $ để tạo ra 1 biến khác như:

Hàm SASS như thế này:

$font-atack: Helvetica, sans-serif
$primary-color:#333

body
  font: 100% $font-atack
  color: $primary-color

Sẽ trả về kết quả CSS sau:

body { 
 font: 100% Helvetica, sans-serif;
 color: #333;
}

Như vậy, rõ ràng SASS lấy giá trị trong các biến ta đã định nghĩa ở $, trong trường hợp ở ví dụ cụ thể này thì là $front-stack và $primary-color rồi output ra thành tệp CSS với cùng giá trị, chức năng được thay thế trong CSS. Đây là điểm cộng lớn vì sẽ giúp toàn trang giữ được tính nhất quán về màu sắc và font chữ.

Nesting

Như các bạn cũng biết tuy cùng là ngôn ngữ lập trình nhưng CSS lại không có chức năng lồng thẻ này trong thẻ kia như HTML. Tuy nhiên khi SASS sẽ giúp các bạn giải quyết vấn đề đó. Ngôn ngữ SASS có chức năng lồng thẻ CSS với nhau để giúp CSS tiêu trừ điểm yếu, nhưng khi bạn lạm dụng nó thì sẽ dẫn đến việc bị lẫn lộn, khó bảo trì hay sửa chữa và đặt biệt nếu bạn quá lạm dụng chức năng này thì đôi khi bạn sẽ tạo ra một sản phẩm khá tệ.

Hàm SASS như thế này:

nav 
  ul 
    margin: 0 
    padding: 0 
    list-style: none
  li 
    display: inline-block
  a 
    display: block 
    padding: 6px 12px 
    text-decoration: none

Sẽ trả về kết quả CSS sau:

nav ul { 
  margin: 0; 
  padding: 0; 
  list-style: none;
}
nav li { 
  display: inline-block; 
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; 
}

Bạn dễ dàng thấy bộ chọn nav trong ví dụ này trông như bội số chung được rút ra để ở trên, bạn cũng có thể hiểu bộ chọn thẻ ul, li, a đã được lồng trong nav. Nó đã biến tệp CSS này trở nên dễ nhìn, đọc và hiểu hơn đúng không nào?

Partials

Những file độc lập có thể tự chứa đựng file CSS, trong trường hợp cần thiết bạn có thể gắn nó vào các SASS khác, nó vẫn vận hành tốt mà không bị gián đoạn. Có thể hiểu, nó có cơ chế hoạt động độc lập 1 cách tuyệt vời, bạn có thể thêm bất kì đoạn CSS nào và SASS vẫn làm tốt vai trò của nó, giúp mọi thứ trở nên dễ dàng hơn kể cả việc chỉnh sửa. Những file SASS độc lập bắt đầu bằng dấu gạch ngang dưới ( _ ), để vận hành file bạn dùng chỉ thị @import để thao tác nhé.

Import 

Trong trường hợp muốn tách nhỏ CSS để chỉnh sửa chi tiết, thì rất dễ dàng thấy rõ nhược điểm của CSS ở phần này, đó là sẽ tạo ra request HTTP không cần thiết. SASS có thể khắc phục nhược điểm đó của CSS, khi sử dụng ký pháp @import thay vì nhận lại được request thì SASS sẽ đem file ta có nhu cầu import kết hợp với file đang nhu cầu tách nhỏ => dễ dàng thực hiện dễ dàng.

Mixins

Minxi của hỗ trợ người dùng tái sử dụng các CSS đã được khai báo từ trước thông qua Web. Ngoài ra, người dùng cũng có thể truyền thêm tham số bất kỳ để tạo minxi tùy biến. Ví dụ: 

Hàm SASS như thế này:

=transform($property)
   -webkit-transform: $property
   -ms-transform: $property
   transform: $property

.box 
   +transform (rotate (30deg))

Sẽ trả về kết quả CSS sau:

.box { 
  -webkit-transform: rotate (30deg);
  -ms-transform: rotate (30deg);
  transform: rotate (30deg);
}

Có thể thấy trong ví dụ về transform, mixin được đặt tên là transform theo cú pháp @mixin transform. Ngoài ra ở trong ví dụ còn sử dụng biến tên $property (được đặt trong cặp ngoặc tròn ( )) thể hiện ý nghĩa là bạn có thể truyền transform. Sau khi hoàn thành ký pháp, bạn có thể sử dụng nó như thông thường, đó là khai báo như 1 CSS trên web với cú pháp @include tên mixin là xong.

Extend

Tính năng thừa kế và một trong những đặc điểm nổi bật cũng như tiện lợi nhất của SASS. Điều này cũng là 1 phần  lý do giúp SASS trông gọn gàng hơn hẳn so với các ngôn ngữ khác. Có thể hiểu đơn giản tính thừa kế của nó như thế này, giả dụ bộ chọn thẻ a, b, c, d được định nghĩa là %XYZ, thì nghĩa là đâu %XYZ xuất hiện thì bộ thẻ a, b, c, d cũng sẽ có mặt và thực hiện đúng chức năng của nó. Chức năng này đã giúp nhiều người sử dụng SASS không cần phải viết nhiều tên lớp trong HTML.

Operators

Việc thực hiện các phép toán trong CSS chắc hẳn không còn xa lạ với các Coder vì đơn giản việc tính toán trong CSS rất tiện lợi. SASS cũng có những phép toán tiện lợi như thế ví dụ như phép tính cộng, trừ, nhân, chia và tính phần trăm, độ lớn của aside và article.

Điểm bất cập của SASS

Như các bạn đã biết, khi viết SASS các lập trình viên phải lưu ý thụt đầu dòng, tuy nhiên nếu bạn thụt đầu dòng một cách lộn xộn thì ngôn ngữ SASS sẽ dựa theo những thụt đầu dòng đó mà hiểu nhầm, lồng các selector rối cả lên! Ví dụ như tệp CSS bên dưới:

.element-a    
    color: hotpink    
    .element-b        
        float: left

Sẽ được hiểu và recode như sau:

.element-a {
    color: hotpink;
}
.element-a .element-b {    
    float: left;
}

Rõ ràng lúc này tệp CSS này của bạn đã bị SASS hiểu nhầm và đưa ra một khái niệm mới mất rồi. Chỉ cần bạn lơ là 1 chút với việc thụt đầu dòng, bạn cũng đã thấy sự khác biệt diễn ra ở đây. Khi đó .element-b sẽ vào hẳn một level và nó sẽ trở thành con của .element-a => sai ý nghĩa tệp CSS trước đó. Chính vì thế, điểm bất cập ở đây là bạn phải chú ý khi thụt dòng

Điểm bất lợi tiếp theo là khi sử dụng và làm quen với SASS, có nghĩa là bạn phải học thêm một loại ngôn ngữ mới hoàn toàn chỉ để bổ trợ cho ngôn ngữ chính là CSS. Khác với SCSS, ở SCSS có tự tương đồng về mặt ngôn ngữ, ý nghĩa và chức năng với CSS nên sẽ dễ tiếp cận và làm quen hơn so với SASS.

Vì SASS dùng cách thụt đầu dòng để định nghĩa nên rất khó để xác định vùng chọn ngay mà cần phải tốn thời gian để xác định lại. Ngoài ra ngôn ngữ này không được hỗ trợ nhiều plugin, điều này khá chán khi sử dụng.

Trình dịch từ SASS qua CSS

Hiện tại có 2 trình dịch miễn phí được mọi người sử dụng khá nhiều, đó là trình dịch Koala và trình dịch Laravel Mix. Cả 2 đều có thể giúp bạn biên dịch từ SASS sang thuần CSS.

Có thể bạn muốn xem thêm:

• Những thủ thuật sử dụng SCSS có thể bạn chưa biết
• Làm việc với CSS Modules trong React
• Cảm giác khi bạn viết CSS như thế nào trong năm 2022

Tham khảo các vị trí tuyển lập trình CSS mới nhất cho bạn