SASS (Syntactically Awesome Style Sheets) và SCSS (Sassy CSS) là hai ngôn ngữ mở rộng của CSS, giúp việc viết và quản lý mã CSS trở nên dễ dàng hơn và hiệu quả hơn. Trong bài viết này, chúng ta sẽ tìm hiểu cách viết CSS bằng SASS/SCSS, cùng với các tính năng và lợi ích mà chúng mang lại.
1. Giới Thiệu Về SASS/SCSS
SASS là một ngôn ngữ tiền xử lý CSS, có nghĩa là nó mở rộng khả năng của CSS bằng cách thêm các tính năng mới và cung cấp cách viết mã phong phú hơn. SASS có hai cú pháp:
SASS: Cú pháp của SASS sử dụng định dạng không có dấu chấm phẩy và dấu ngoặc nhọn.
SCSS: SCSS (Sassy CSS) là một cú pháp mở rộng của SASS, giữ lại cú pháp CSS chuẩn, bao gồm dấu chấm phẩy và dấu ngoặc nhọn.
Bài viết này sẽ tập trung vào SCSS vì nó tương tự như CSS truyền thống, dễ học hơn cho những người mới bắt đầu.
2. Cài Đặt SASS/SCSS
Trước khi bắt đầu viết SCSS, bạn cần cài đặt SASS. Bạn có thể cài đặt SASS qua npm (Node Package Manager) bằng cách sử dụng lệnh sau trong terminal:
npm install -g sassSau khi cài đặt, bạn có thể biên dịch file SCSS thành file CSS bằng lệnh:
sass input.scss output.css
3. Cấu Trúc Cơ Bản Của SCSS
Một file SCSS thường có phần mở rộng .scss. Cú pháp SCSS tương tự như CSS, nhưng với thêm các tính năng mở rộng. Dưới đây là một ví dụ đơn giản:
// SCSS
$primary-color: #3498db;
$padding: 16px;
body {
font-family: Arial, sans-serif;
padding: $padding;
}
h1 {
color: $primary-color;
margin-bottom: $padding;
}Trong ví dụ trên, chúng ta đã sử dụng biến $primary-color và $padding để định nghĩa các giá trị màu sắc và padding. Điều này giúp dễ dàng thay đổi các giá trị này ở một nơi duy nhất mà không phải tìm và thay thế trong toàn bộ mã.
4. Các Tính Năng Nổi Bật Của SCSS
a. Biến (Variables)
Biến trong SCSS giúp lưu trữ giá trị như màu sắc, kích thước, font chữ, v.v. Bạn có thể định nghĩa biến và sử dụng chúng trong toàn bộ file SCSS.
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}b. Nesting (Lồng Ghép)
Nesting cho phép bạn lồng các selector bên trong nhau, giúp mã CSS trở nên có tổ chức hơn và dễ đọc hơn.
nav {
background-color: #333;
ul {
list-style-type: none;
padding: 0;
li {
display: inline-block;
margin-right: 10px;
a {
color: white;
text-decoration: none;
}
}
}
}c. Mixins
Mixins cho phép bạn tạo các đoạn mã CSS có thể tái sử dụng. Bạn có thể truyền tham số cho mixin để tạo ra các kiểu dáng linh hoạt.
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}d. Inheritance (Kế Thừa)
SASS hỗ trợ kế thừa các thuộc tính từ một selector khác, giúp giảm thiểu sự lặp lại mã.
%button-styles {
padding: 10px 20px;
border: none;
border-radius: 5px;
}
button {
@extend %button-styles;
background-color: blue;
color: white;
}e. Partials và Import
SCSS cho phép bạn chia nhỏ mã CSS thành các file nhỏ hơn và sau đó nhập chúng vào file chính. Các file con được gọi là “partials” và thường bắt đầu với dấu gạch dưới.
// _variables.scss
$primary-color: #333;
// _buttons.scss
.button {
background-color: $primary-color;
}
// styles.scss
@import 'variables';
@import 'buttons';
body {
font-family: Arial, sans-serif;
}5. Biên Dịch SCSS
Để biên dịch SCSS thành CSS, bạn cần sử dụng công cụ biên dịch. Bạn có thể thực hiện việc này thông qua dòng lệnh hoặc sử dụng các công cụ tích hợp sẵn trong các IDE như VSCode.
sass styles.scss styles.css6. Kết Luận
SASS/SCSS là các công cụ mạnh mẽ giúp cải thiện quy trình viết CSS, cung cấp các tính năng như biến, nesting, mixins, và kế thừa, giúp mã nguồn trở nên sạch hơn và dễ bảo trì hơn. Bằng cách làm quen với SCSS, bạn có thể viết mã CSS hiệu quả và dễ dàng hơn.
Hãy thử áp dụng các tính năng của SCSS vào dự án của bạn và cảm nhận sự khác biệt trong quy trình phát triển web của bạn.
Kết nối với web designer Lê Thành Nam
