Sass là gì? Sử dụng Sass để viết CSS như thế nào?
SASS ra đời nhằm giải quyết tình trạng nhàm chán của lập trình viên khi làm việc trong thời gian dài với CSS. Vậy SASS là gì? Hãy cùng Bizfly Cloud tìm hiểu thông qua bài viết dưới đây!
SASS là gì?
SASS là tên viết tắt của Syntactically Awesome Stylesheets. Nó được biết đến là một CSS Preprocessor có tác dụng trong việc cung cấp các quy tắc chẳng hạn như mixin, variable, nested rule… Khi sử dụng SASS, người dùng có thể viết CSS theo trình tự cụ thể, tự động nén ngang trên tập tin CSS hoặc quản lý định nghĩa có sẵn đơn giản.
SASS là gì?
Lợi ích khi sử dụng Sass
Khi sử dụng SASS chuyển đổi thành CSS sẽ đem lại những lợi ích sau đây:
- Tiện lợi khi sử dụng: Mặc dù SASS sẽ có nhiều lưu ý bắt buộc khi viết code vì cần chủ động thụt đầu dòng. Tuy nhiên, nó lại được xem là cực kỳ tiện lợi cho việc dùng các ký tự dễ type nhầm lẫn như }, {, ;.
- Ngắn gọn: Sử dụng SASS lên CSS đem tới sự tiện lợi hơn khi đánh máy và so với ngôn ngữ CSS thông thường, SASS thường ngắn gọn hơn. Đặc biệt, khi dùng SASS nó thậm chí còn đang dùng ký tự bắt buộc ít hơn như dấu chấm phẩy, dấu ngoặc dọn. Người dùng chỉ cần sử dụng dấu cộng, hai chấm là đủ.
Bên cạnh đó, khi sử dụng SASS người dùng còn có thể dễ dàng cải thiện những nhược điểm còn tồn tại của CSS như sau:ơ bản để sử dụng Sass hiệu quả. Để các bạn dễ hiểu thì tất cả đều có ví dụ thực tế.
Cú pháp (syntax)
Sass có 2 lựa chọn cú pháp:
SCSS (Sassy CSS): sử dụng file có đuôi .scss hoàn toàn tương thích với cú pháp trong CSS.
Indented (thường gọi là 'Sass'): sử dụng file đuôi .sass và thụt lề thay cho dấu ngoặc nhọn {}; mặc dù không hoàn toàn tương thích với CSS nhưng ưu điểm của loại cú pháp này là có thể viết rất nhanh => Tiết kiệm thời gian viết.
Ta có thể chuyển đổi qua lại giữa 2 cú pháp trên bằng cách sử dụng lệnh sass-convert.
Các biến (variables)
Giống như nhiều ngôn ngữ khác, Sass cho phép bạn sử dụng các biến để lưu trữ thông tin và sử dụng lại chúng trong suốt quá trình làm việc với style sheet.
Ví dụ, bạn có thể lưu trữ một mã màu trong một biến ở phần đầu của file, sau đó sử dụng lại biến này để gán màu cho các phần tử khác.
Lợi ích khi sử dụng Sass
Điều này có nghĩa là bạn có thể nhanh chóng thay đổi màu sắc có nhiều phần tử cùng lúc mà không cần sửa từng dòng code.
Ví dụ khi bạn viết trong Sass:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body { font: 100% $font-stack;
color: $primary-color; }
Những dòng CSS dưới đây sẽ được tạo ra:
body {
font:100% Helvetica, sans-serif;
color:#333;
}
Lồng ghép (Nesting)
Nesting là một con dao hai lưỡi. Mặc dù nó cung cấp một giải pháp tuyệt vời để giảm thiểu số lượng code cần viết, nhưng nó cũng có thể dẫn đến tình trạng overqualified CSS nếu người sử dụng thiếu kinh nghiệm và sử cẩn trọng.
Ý tưởng của nesting là lồng các vùng chọn CSS của bạn theo cách bắt chước hệ thống phân cấp HTML.
Để hiểu hơn về Nesting, hãy xem xét ví dụ sau.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a { display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Đây là một navigation style sử dụng nesting. Kết quả sẽ cho ra CSS như 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;
}
Như đã đề cập, nesting là một con dao hai lưỡi và nhiều web developer không có thiện cảm với nesting. Họ thà không sử dụng tính năng này còn hơn đối mặt với các rủi ro mà nesting gây ra cho file CSS. Bạn có thể tham khảo bài viết này để hiểu được tác hại khi sử dụng nesting một cách thiếu hiệu quả.
Partials
Partials (các phần) là các tệp Sass nhỏ hơn có thể được nhập vào các tệp Sass khác. Để dễ hiểu thì partials như các đoạn mã. Với các đoạn mã này, CSS của bạn có thể được mô-đun hóa khiến cho nó dễ quản lý và bảo trì hơn. Mỗi một phần được chỉ định bằng cách đặt tên với dấu gạch dưới: _partial.scss.
Import
Lệnh @import cho phép bạn nhập các file partials vào file hiện tại để xây dựng một file CSS duy nhất. Lưu ý là bạn sử dụng bao nhiêu imports thì sẽ có bấy nhiêu HTTP request được sinh ra.
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
Extend
Đây được coi là tính năng hoàn hảo nhất của SASS. Nó chính là lý do khiến cho SASS trở nên gọn gàng hơn những ngôn ngữ khác. Cùng với tính năng này, người dùng sẽ không cần viết quá nhiều tên lớp ở trong HTML.
Operators
Các coder sẽ có tác dụng giúp việc tính toán ở trong CSS trở nên đơn giản hơn. Sử dụng SASS người dùng có thể thực hiện các phép toán đơn giản như cộng, trừ, nhân, chia, độ lớn của article, aside hoặc tính phần trăm.
Kiến trúc SSAS (SSAS architecture)
Công cụ SSAS có kiến trúc với các thành phần sau đây:
RDBMS (Hệ Quản Trị Cơ Sở Dữ Liệu Quan Hệ)
Tất cả dữ liệu từ nhiều nguồn như excel, cơ sở dữ liệu, văn bản và các nguồn khác đều được lấy vào hệ quản trị cơ sở dữ liệu quan hệ bằng công cụ ETL. Hệ quản trị cơ sở dữ liệu quan hệ – RDBMS chịu trách nhiệm thu thập dữ liệu từ các nguồn khác nhau.
SSAS (Dịch Vụ Phân Tích SQL Server)
Trong giai đoạn này, tất cả dữ liệu tập hợp từ hệ quản trị cơ sở dữ liệu quan hệ sẽ được chuyển vào các khối lập phương bằng cách sử dụng các dịch vụ dự án. Các khối lập phương trong SSAS sẽ tạo ra một cơ sở dữ liệu mới bao gồm phân tích. Loại cơ sở dữ liệu này được gọi là cơ sở dữ liệu phân tích, có thể được sử dụng cho các mục đích khác nhau.
Các bên liên quan
Các bên liên quan hoặc khách hàng sẽ có khả năng truy cập dữ liệu và thực hiện các thao tác theo yêu cầu. Việc truy cập và quản lý dữ liệu có thể được thực hiện thông qua các bảng điều khiển, cổng thông tin, v.v.
Kiến trúc máy chủ
Trong SSAS, ứng dụng Msmdsrv.exe được sử dụng như một thành phần khách, về cơ bản chạy trong dịch vụ Windows. Nó bao gồm một bộ xử lý truy vấn thực hiện các nhiệm vụ sau:
- Quản lý siêu dữ liệu
- Xử lý các giao dịch
- Phân tích các câu lệnh nhận được từ khách hàng
- Thực hiện các phép tính
- Tạo các phép gộp và lập lịch truy vấn
- Lưu trữ đối tượng vào bộ nhớ đệm
- Quản lý tài nguyên máy chủ
Kiến Trúc Khách Hàng
Máy chủ có khả năng xử lý tất cả các truy vấn và chức năng. Cần phải thiết lập một kết nối giữa máy chủ và khách hàng cho mỗi yêu cầu và sự giao tiếp này có thể được thực hiện bằng cách sử dụng các gói SOAP. Công nghệ SSAS cũng cung cấp sự hỗ trợ đáng quý của nó cho các dịch vụ web. Trong kiến trúc khách hàng, tất cả dữ liệu có sẵn từ nhiều nguồn như excel, văn bản, cơ sở dữ liệu, access, và các tập dữ liệu khác sẽ đi qua xử lý OLAP. Các khối sẽ được tạo ra và dữ liệu có thể được truy cập thông qua các bảng điều khiển, cổng thông tin, báo cáo, v.v.
Một số bất cập khi sử dụng SASS
Mặc dù SASS đem tới rất nhiều lợi ích cho người dùng, nhưng nó vẫn còn tồn tại một số bất cập sau đây:
- Phải thụt đầu dòng: Khi viết SASS, đòi hỏi người dùng phải thụt đầu dòng. Nhưng nếu bạn thực hiện thụt đầu dòng không có trật tự sẽ gây ra hiểu lầm khiến việc các selector lồng với nhau bị lộn xộn. Khi đó tệp CSS bị SASS hiểu lầm và tạo ra khái niệm mới.
- Người dùng phải học ngôn ngữ mới: Để làm quen và sử dụng SASS thành thạo, đòi hỏi người dùng cần phải học thêm ngôn ngữ mới để bổ trợ cho CSS.
- Khó xác định vùng chọn: SASS thường sử dụng cách thụt đầu dòng để định nghĩa nên việc xác định vùng chọn thường khá khó và tốn nhiều thời gian. Bên cạnh đó, nó cũng không được hỗ trợ nhiều plugin.
- Khả năng tương thích: Mặc dù tính năng của SASS dễ tương thích với CSS. Tuy nhiên, với nhiều trường hợp, các tính năng mới của SASS vẫn chưa được trình duyệt hỗ trợ. Nó có thể gây ra lỗi hoặc hành vi không mong muốn trên trình duyệt.
So sánh SASS và SCSS
SASS và SCSS đều là 2 biến thể có cùng ngôn ngữ. Tuy nhiên, cả hai lại có những sự khác biệt sau đây:
Cú pháp
- SASS: Thường dùng cú pháp với dấu lùi và khoảng trống để định nghĩa cấu trúc mã nguồn. Nó không dùng dấu ngoặc nhọn và dấu chấm phẩy.
- SCSS: Sử dụng cú pháp tương tự với CSS gồm có dấu ngoặc nhọn và dấu chấm phẩy.
Khả năng tương thích
- SASS: Khi tích hợp với các công cụ CSS, SASS có thể gặp một số vấn đề về sự tương tích do cú pháp khác biệt.
- SCSS: Được thiết kế để tương thích với cú pháp CSS để dễ dàng tích hợp vào dự án hiện có mà không cần sửa đổi nhiều.
Tính phổ biến
- SASS: Là phiên bản gốc của ngôn ngữ SASS, được phát triển trước SCSS.
- SCSS: Trở thành ngôn ngữ phổ biến hơn, đặc biệt trong cộng đồng phát triển web, do tính tương thích tốt hơn với CSS.
Khả năng hỗ trợ
- SASS: Có một số framework và công cụ hỗ trợ, nhưng không nhiều như SCSS.
- SCSS: Được hỗ trợ rộng rãi bởi nhiều framework CSS và công cụ phát triển web như Bootstrap, Foundation, và Sass compiler.
Sự linh hoạt
- SASS: Cú pháp tự do hơn, cho phép bạn viết mã nguồn một cách ngắn gọn hơn và dễ đọc hơn.
- SCSS: Cú pháp giống CSS hơn, điều này có thể làm cho việc chuyển đổi từ CSS sang SCSS và ngược lại dễ dàng hơn.
Trên đây, Bizfly Cloud vừa cung cấp đến bạn thông tin liên quan đến SASS là gì và những lợi ích mà SASS đem lại cho CSS. Hy vọng bạn đã có những kiến thức bổ ích để ứng dụng SASS hiệu quả trong quá trình lập trình.
>> Có thể bạn quan tâm: 7 đơn vị CSS có thể bạn chưa biết
