CSS và SCSS/SASS là hai ngôn ngữ bảng kiểu được sử dụng để định dạng tài liệu HTML và XML. CSS là ngôn ngữ định kiểu phổ biến nhất, được sử dụng bởi hầu hết các nhà phát triển web. SCSS và SASS là các ngôn ngữ tiền xử lý CSS, cung cấp các tính năng bổ sung cho CSS để giúp viết CSS dễ dàng và hiệu quả hơn. Hôm nay, Boomco sẽ mang đến cho bạn những điểm khác nhau thú vị giữa hai ngôn ngữ này.
CSS là gì?
CSS là viết tắt của Cascading Style Sheets, là một ngôn ngữ định kiểu cấp cao được sử dụng để định dạng tài liệu HTML và XML. Lập trình viên sử dụng CSS để xác định màu sắc, phông chữ, kích thước, bố cục và các thuộc tính khác của các phần tử HTML.
CSS hoạt động bằng cách áp dụng các quy tắc định kiểu cho các phần tử HTML. Các quy tắc CSS bao gồm một phần tử chọn và một hoặc nhiều thuộc tính và giá trị. Phần tử chọn xác định các phần tử HTML mà quy tắc áp dụng. Thuộc tính và giá trị xác định các thuộc tính và giá trị CSS mà sẽ được áp dụng cho các phần tử được chọn.
SCSS/SASS là gì?
SCSS và SASS là hai ngôn ngữ tiền xử lý CSS, chúng cung cấp các tính năng bổ sung cho CSS để giúp viết CSS dễ dàng và hiệu quả hơn.
SCSS là viết tắt của Sassy CSS. Ngôn ngữ sử dụng cú pháp tương tự như CSS, nhưng nó cũng hỗ trợ các tính năng nâng cao như biến, hàm, lớp và nhúng.
SASS là viết tắt của Syntactically Awesome Style Sheets. SASS sử dụng cú pháp hơi khác so với CSS, nhưng nó cũng hỗ trợ các tính năng nâng cao giống như SCSS.
So sánh CSS và SCSS/SASS
Những khác biệt chính trong CSS và SCSS/SASS
- Cú Pháp: CSS sử dụng cú pháp truyền thống, đơn giản. SCSS tương tự như CSS nhưng có thêm sức mạnh của một trình tiền xử lý. SASS có cú pháp ngắn gọn hơn, loại bỏ ngoặc nhọn và dấu chấm phẩy.
- Tính Năng: SCSS/SASS giới thiệu các tính năng như biến, lồng nhau, mixins và kế thừa, không có trong CSS thuần.
- Biên Dịch: Mã SCSS/SASS cần được biên dịch thành CSS chuẩn, có thể được hiểu bởi trình duyệt web.
Về cú pháp:
- CSS có cú pháp đơn giản, mỗi bộ quy tắc bao gồm một bộ chọn và một khối khai báo.
Ví dụ:
p {
color: red;
font-size: 16px;
}
- Các cú pháp trong SCSS và SASS:
SASS sử dụng cú pháp ngắn gọn hơn và bỏ qua ngoặc nhọn và dấu chấm phẩy, dựa vào thụt lề để phân tách các khối mã.
SCSS: Đây là cú pháp mới cho SASS và sử dụng cùng cú pháp với CSS, giúp người mới bắt đầu dễ học hơn. Nó hoàn toàn tương thích với cú pháp của CSS, đồng thời vẫn hỗ trợ đầy đủ sức mạnh của SASS.
Ví dụ trong SCSS:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Ví dụ trong SASS:
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
Về Nesting:
Nesting là một tính năng của SCSS/SASS cho phép bạn viết CSS của mình theo cách phân cấp, phản ánh cấu trúc HTML. Điều này làm cho mã trở nên dễ đọc và dễ bảo trì hơn. Dưới đây là một ví dụ để minh họa cách nesting hoạt động trong SCSS/SASS:
Giả sử bạn có cấu trúc HTML như thế này:
<div class="container">
<h1>Header</h1>
<p class="text">Đoạn văn</p>
</div>
- Trong CSS truyền thống, bạn có thể tạo kiểu cho các phần tử này như sau:
.container {
width: 100%;
padding: 20px;
}
.container h1 {
font-size: 24px;
color: blue;
}
.container .text {
font-size: 16px;
color: green;
}
- Sử dụng SCSS/SASS, bạn có thể tận dụng tính năng nesting:
.container {
width: 100%;
padding: 20px;
h1 {
font-size: 24px;
color: blue;
}
.text {
font-size: 16px;
color: green;
}
}
Trong ví dụ SCSS/SASS này, các kiểu cho h1 và .text được nesting bên trong khối .container. Điều này cho thấy rõ ràng h1 và .text là các phần tử con của .container, phản ánh cấu trúc HTML. Việc nesting này làm cho bảng kiểu trở nên gọn gàng và dễ đọc hơn.
Về Inheritance:
Inheritance trong SCSS/SASS là một tính năng mạnh mẽ cho phép bạn chia sẻ một bộ thuộc tính CSS từ một bộ chọn này sang bộ chọn khác. Điều này được thực hiện bằng cách sử dụng chỉ thị @extend. Nó giúp giữ mã SCSS/SASS code DRY (Don’t Repeat Yourself) bằng cách giảm sự lặp lại của các khai báo kiểu.
Xem xét ví dụ sau đây nơi chúng ta có hai lớp, .panel và .danger-panel, và chúng ta muốn .danger-panel kế thừa các kiểu từ .panel nhưng cũng có một số kiểu bổ sung:
- CSS:
.panel, .danger-panel {
border: 1px solid #ddd;
padding: 10px;
background: #f7f7f7;
}
.danger-panel {
background: #ffdddd;
border-color: #ff0000;
}
- SCSS/SASS:
.panel {
border: 1px solid #ddd;
padding: 10px;
background: #f7f7f7;
}
.danger-panel {
@extend .panel;
background: #ffdddd;
border-color: #ff0000;
}
Kết luận
Trên thực tế, việc sử dụng SCSS/SASS có thể dẫn đến việc tạo ra các bảng kiểu được tổ chức và dễ bảo trì hơn, đặc biệt là trong các dự án lớn. Tuy nhiên, vì trình duyệt chỉ hiểu CSS thuần, bất kỳ SCSS/SASS nào cũng cần được biên dịch thành CSS để sử dụng trong sản xuất.
Nếu bạn là một người đang tìm hiểu về các ngôn ngữ lập trình khác nhau, đừng bỏ lỡ cơ hội học lập trình cùng Boomco Academy tại đây nhé!
Lớp học của Boomco không chỉ cung cấp cho bạn đầy đủ kiến thức cơ bản về lập trình mà còn đảm bảo cơ hội việc làm trong tương lai, bạn có thể tham khảo các link dưới đây để được tư vấn về lớp học.
Boomco Academy: https://academy.boomco.io/
Đăng kí nhận tư vấn: https://bit.ly/3rH9bfP
Đăng kí lớp học: https://bit.ly/46FAKFe
