Chắc hẳn, mỗi một lập trình viên khi thực hiện viết CSS theo các cách bình thường nhất thì cũng sẽ phần nào ngán ngẩm bởi các thao tác nhạt nhẽo lặp đi lặp lại. Chính vì vậy, một tầm cao mới giúp “giải thoát” các chuyên gia Developer khỏi tình trạng này đó là SASS. Vậy SASS là gì? Hãy cùng với các chuyên gia của ITNavi khám phá ngay thôi nào!
Định nghĩa SASS là gì?
SASS được định nghĩa là một CSS Preprocessor có khả năng cung cấp những quy tắc dạng như: nested rule, variable, mixin,... Đối với SASS thì bạn có thể viết CSS dựa theo một trình tự rõ ràng, các quản lý định nghĩa có sẵn đơn giản và bạn cũng có thể thực hiện tự động nén ngay trên tập tin CSS.
Bạn đã biết SASS là gì chưa?
Hướng dẫn cài đặt và sử dụng SASS
Hướng dẫn cài đặt
SASS là một trong những ứng dụng được viết vô cùng phổ biến Ruby nên trước tiên bạn cần phải cài đặt Ruby trên máy tính của mình nhé.
Lệnh: gem install sass
- Thực hiện chuyển đổi tập tin .sass sang .css
Lệnh: sass app.scss app.css
- Tự động thực hiện một số chuyển đổi trong quá trình làm việc:
Lệnh: sass --watch app.scss:app.css
- Thực hiện chuyển đổi tất cả một thư mục trong quá trình làm việc.
Lệnh: sass --watch app/sass:public/css
Cách sử dụng SASS
Những quy tắc viết SASS bạn cần tuân thủ như sau:
- Thực hiện các quy tắc xếp chồng
Sass có thể cho phép CSS có thể lồng ghép vào nhau:
Ví dụ bạn có thể tham khảo như sau:
| #container {
width: 69%;
p, div {
font-size: 69px;
a {
font-weight: bold;
}
}
} |
Sau khi đã biên dịch ta sẽ được:
| #container {
width: 69%;
}
#container p, #container div {
font-size: 69px;
}
#container p a, #container div a {
font-weight: bold;
} |
- Sử dụng các biến trong SASS
Cách đơn giản nhất để bạn có thể sử dụng được SASS là sử dụng biến. Nếu như biến bắt đầu bằng ký hiệu $ và sẽ được thiết lập như một số thuộc tính CSS.
Tham khảo ví dụ:
| $width: 69px;
#container {
width: $width;
}
#main {
max-width: $width;
} |
Sau khi bạn đã biên dịch được thì sẽ như sau:
| #container {
width: 69px;
}
#main {
max-width: 69px;
} |
Các cú pháp SASS hướng dẫn cú pháp SASS cơ bản:
Thông thường, ngôn ngữ SASS sẽ giúp cho bạn đưa ra theo dạng cú pháp cps sao cho phù hợp với nhu cầu lập trình của người sử dụng như sau:
SASS (Indented): Việc sở hữu được Sở hữu sự khác biệt rõ ràng với các CSS vì nó thường được chú trọng hơn trong việc thụt lề để có thể định nghĩa được chứ không giống với các dạng CSS sử dụng dấu ngoặc. Chính vì vậy, bạn có thể thực hiện các bước chuyển cú pháp từ dạng CSS sang SASS và ngược lại bằng lệnh sass-convert một cách dễ dàng hơn rất nhiều.
SASS trong CSS
SCSS (hay còn gọi là Sassy CSS): nó thường có đến 90% loại đồng dạng với nhau và cũng như tuân thủ được theo các cú pháp ngôn ngữ dạng CSS được mở rộng hơn 1 chút.
Bạn đọc tham khảo thêm: Spring nghĩa là gì? Lợi ích mà Spring mang lại cho người dùng
Lợi ích mà bạn sẽ nhận được khi ứng dụng SASS lên CSS
Chắc rằng, không phải tự nhiên mà ở thời điểm hiện tại các lập trình viên lại ưa chuộng sử dụng SASS đến thế. Vậy lợi ích mà SASS là gì? Hãy cùng giải đáp nghi vấn này ngay sau đây:
Điều khiến SASS có nhiều mặt ấn tượng đầu tiên khi lên SASS lên CSS đó chính là sự tiện dụng dành cho quá trình đánh máy và nó thường ngắn hơn so với ngôn ngữ CSS thông thường khác. Ngoài ra, nó còn chỉ cần sử dụng ít hơn những ký tự được xem là bắt buộc đối với CSS như: dấu chấm phẩy, ngoặc nhọn, … để viết. Ngoài ra, SASS còn được đánh giá là tiện dụng bởi bạn chỉ cần sử dụng dấu 2 chấm hoặc dấu cộng là rất đủ mà không cần phải sử dụng đến @mixin hoặc là @inclue nào khác.
Mặc dù có một số lưu ý bắt buộc như: viết code cần phải chủ động ghi nhớ thụt đầu dòng nhưng nó lại vô cùng tiện lợi cho việc sử dụng lâu hơn các ký tự dễ type nhầm lẫn.
Ngoài ra, bởi vì SASS sở hữu tính mạch lạc, rõ ràng cao nên mọi ngôn ngữ của SASS cũng đồng dạng bởi một số yêu cầu cần rõ ràng khi lập trình. Điều quan trọng là bạn không được quên thụt đầu dòng, code được viết phải rõ ràng và lựa chọn định dạng ngôn ngữ tốt nhất.
Điều cuối cùng là việc sử dụng SASS sẽ giúp các bạn cải thiện những điểm trừ từ CSS như:
Việc sử dụng các Variable bởi các lập trình viên nhằm mục đích lưu trữ và tái sử dụng lại tài nguyên là vô cùng phổ biến. Khi thực hiện cách này thì lập trình viên có thể tái sử dụng tùy ý bất kỳ tài nguyên CSS nào có sẵn bằng ký pháp $ để có thể tạo ra 1 biến khác biệt hơn.
SASS sử dụng cách đầu dòng để định nghĩa
SASS thường lấy các giá trị có trong biến và ta đã định nghĩa với $. Trong một số ví dụ trường hợp, có thể là: $front-stack và $primary-color rồi thực hiện output ra ngoài thành tệp CSS có cùng giá trị, chức năng để có thể thay thế được trong CSS. Đây chính là một trong những điểm cộng quan trọng giúp cho toàn trang có thể giữ lại được mọi đặc tính nhất quán về font chữ và màu sắc.
Để trả lời cho câu hỏi lợi ích SASS là gì thì 1 vấn đề nữa bạn không nên bỏ qua như sau:
Mặc dù cùng là một dạng ngôn ngữ lập trình nhưng CSS lại không được trang bị chức năng lồng thẻ này trong thẻ khác như HTML. Mặc dù vậy, SASS lại có thể giúp bạn giải quyết được vấn đề đó. Ngôn ngữ lập trình SASS được trang bị chức năng lồng thẻ CSS với nhau để giúp tiêu trừ được các nhược điểm mà CSS không thể đáp ứng được. Tuy nhiên, bạn không nên quá lạm dụng chức năng này bởi có thể sẽ tạo ra những sản phẩm có chức năng khá tệ.
Một số file độc lập thường có chứa đựng file CSS, nên trong một số trường hợp cần thiết thì bạn có thể gắn nó vào các SASS khác mà nó vẫn có thể vận hành vô cùng tốt mà không bị gián đoạn. Đây là cơ chế hoạt động độc lập vô cùng tuyệt vời giúp SASS làm tốt được vai trò của mình và đơn giản hóa mọi công đoạn một cách dễ dàng hơn. Các file SASS độc lập thường sẽ bắt đầu dấu gạch ngang dưới để có thể vận hành file nên bạn cần dùng chỉ thị @import để thực hiện thao tác dễ dàng hơn nhé.
Với một số trường hợp người dùng muốn tách nhỏ cho CSS để có thể chỉnh sửa được chi tiết hơn thì bạn có thể thấy rõ ràng được nhược điểm của CSS ở phần này nhất. Nó có thể tạo ra được các request HTTP không thực sự cần thiết. SASS có khả năng khắc phục được các nhược điểm này của CSS và chỉ cần sử dụng theo cú pháp @import thay vì phải nhận lại các request thì SASS thường có thể đem lại những file mà bạn có nhu cầu khi kết hợp với file đang nhu cầu dễ tách nhỏ hơn. Nhờ vậy, người dùng có thể thực hiện dễ dàng mọi quy trình.
Minxi của người dùng có thể tái sử dụng 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.
Sử dụng SASS giúp sản phẩm chuyên nghiệp hơn
Các tính năng thừa kế là một trong những đặc điểm được cho là nổi bật cũng như tiện lợi nhất mà SASS sở hữu. Đây cũng là lý do giúp cho SASS trông có phần gọn gàng hơn so với những ngôn ngữ khác. Chức năng này đã hỗ trợ cho rất nhiều người dùng có thể sử dụng SASS mà không cần phải viết tên trong nhiều lớp HTML.
Khi thực hiện các phép toán trong CSS sẽ không còn quá xa lạ đối với mọi Coder. Chính vì vậy, công việc tính toán đơn giản trong CSS cũng trở nên rất tiện lợi. Ngoài ra, SASS cũng được trang bị những phép toán tiện lợi như: phép cộng, trừ, nhân, chia và cả khả năng tính phần trăm cũng như độ lớn của aside, article.
Bạn đọc tham khảo thêm: Project Manager là gì và Con đường để trở thành Project Manager
Một số nhược điểm tồn tại của SASS là gì?
Nếu như viết SASS, thông thường Developer cần phải lưu ý trong việc thụt đầu dòng. Tuy nhiên, nếu như thụt đầu dòng quá lộn xộn thì các ngôn ngữ SASS sẽ dựa vào kiểu đầu dòng đó rồi khiến cho việc lồng các selector rối lên.
Trong trường hợp này thì tệp CSS của bạn đã bị SASS hiểu nhầm và đưa ra một khái niệm hoàn toàn mới. Chính vì vậy, nếu như bạn lơ là trong việc thụt đầu dòng thì sản phẩm cho ra cũng sẽ có sự khác biệt. Lúc đó, .element-b sẽ đi vào hẳn một level và trở thành con của .element-a => khiến cho sai ý nghĩa tệp CSS trước đó. Chính vì vậy, đây là một trong những điểm bất cập mà Developer hay gặp phải khi thực hiện thụt đầu dòng.
Các đặc điểm nổi bật của SASS
Khi sử dụng và làm quen với SASS thì bạn cần phải học thêm một loại ngôn ngữ hoàn toàn mới chỉ để bổ trợ cho ngôn ngữ CSS chính gốc. Khác hoàn toàn với SCSS, bởi SCSS có điểm tương đồng về mặt ngôn ngữ và chức năng với CSS nên việc tiếp cận cũng như làm quen sẽ dễ dàng hơn so với SASS.
Chính vì SASS sử dụng cách thụt đầu dòng để định nghĩa nên thường nó rất khó trong việc xác định vùng chọn ngay mà cần tốn quá nhiều thời gian để xác định lại. Ngoài ra, loại ngôn ngữ này thường không được hỗ trợ thêm nhiều plugin nên nó khá chán khi sử dụng.
Kết luận
Trên đây, là những thông tin hữu ích mà ITNavi đã chia sẻ đến bạn đọc để bạn hiểu rõ hơn SASS là gì? Hiện nay, đang có 2 trình dịch miễn phí là Koala và Laravel Mix. Chúng đều có thể hỗ trợ bạn triệt để trong việc biên dịch từ SASS sang thuần CSS. Vậy nên bạn có thể lưu ý chúng khi sử dụng nhé!
