Từ CSS đến SCSS: Hành trình từ nông dân thành fashionista của website

[Thanh Nguyệt]

“Code không chỉ để chạy, mà còn phải đẹp!” – một nhà phát triển front-end nào đó từng thốt lên. Và đúng vậy, hành trình để biến một trang web từ “HTML mặc quần đùi” thành “giao diện ngầu đét” bắt đầu với CSS, rồi vươn lên SCSS, và đâu đó là @xf của giới quý tộc XenForo.

‍ CSS – Chân ướt chân ráo vào làng thời trang web​

CSS, viết tắt của Cascading Style Sheets, là ngôn ngữ đầu tiên giúp một trang HTML khô khan có chút màu sắc, bố cục, và phong cách.
Nói vui thì CSS là cách bạn mặc đồ cho website, từ kiểu chữ, màu sắc, đến cả sự chuyển động nhẹ nhàng khi rê chuột.
Ví dụ đơn giản:

h1 {
  color: red;
  font-size: 36px;
}

Thế là tiêu đề đỏ rực như chợ Tết, nổi bật ngay lập tức. Không còn là “HTML mộc” nữa!

---

SCSS – Khi CSS quyết định nâng tầm gu thẩm mỹ​

SCSS (Sassy CSS) là một phần của SASS, giúp CSS trở nên “có não”, viết code có logic, không còn là lặp đi lặp lại mỏi tay nữa.
Với SCSS, bạn có thể:

• Dùng biến ($color-primary)
• Lồng selector (khỏi viết đi viết lại .box .title .icon)
• Dùng hàm, mixin, vòng lặp như code thật

Ví dụ SCSS:

$main-color: #3498db;

.button {
  background-color: $main-color;

  &:hover {
    background-color: darken($main-color, 10%);
  }
}

Đẹp – gọn – dễ chỉnh sửa. Chỉ cần đổi $main-color là cả hệ thống đổi màu theo.

​

---

CSS hiện đại giờ cũng “khôn” rồi với var()​

Nếu SCSS là dân thiết kế thời trang có học thức, thì CSS hiện đại giờ cũng không còn “quê mùa”.
Giờ bạn có thể dùng biến trong CSS thật, không cần SCSS nữa, nhờ vào var():

:root {
  --main-color: #ff6600;
}
.button {
  background-color: var(--main-color);
}

Sự tiện lợi này mở ra cơ hội cho những tính năng như dark mode, theme tùy chỉnh, chỉ bằng việc đổi biến gốc.

---

XenForo – Khi forum cũng muốn thời trang​

Nền tảng diễn đàn nổi tiếng XenForo cũng không nằm ngoài cuộc chơi. Nó có hệ thống style riêng, với các biến được định nghĩa bằng cú pháp @xf-.
Ví dụ:

background-color: @xf-primaryColor;

Các biến như @xf-primaryColor, @xf-borderRadiusMedium, v.v… đều được quản lý tập trung trong admin panel. Thay đổi một lần là nguyên forum mặc đồng phục mới.

Đây chính là kiểu “một cú click – cả forum đổi style” mà ai làm giao diện XenForo đều yêu thích.

---

Tổng kết – Hành trình từ thô sơ đến thần thái​

Giai đoạn	Công cụ	Mức độ thời trang	Ghi chú
HTML trần trụi	Không style		Trang trắng tinh, ai mà thích
CSS cơ bản	CSS		Mặc áo, đỡ trống trải
CSS hiện đại	CSS + var()		Biết phối đồ, hợp thời trang
Thời trang đỉnh cao	SCSS		Dùng biến, lồng ghép, tối ưu
Thời trang quý tộc	XenForo + @xf		Style hệ thống, tùy biến linh hoạt

---

Nếu bạn đang là một “nông dân code giao diện” chỉ biết đến CSS cơ bản, thì SCSS sẽ là khóa học thời trang bạn nên thử. Còn nếu bạn đang chơi với XenForo – chúc mừng, bạn đang ở tầng lớp thời trang quý tộc rồi đấy!

---

Tip: Bắt đầu áp dụng var() nếu bạn chưa sẵn sàng dùng SCSS, và hãy tập quen dần với các biến hệ thống như @xf để tùy biến giao diện mà không cần chạm vào cả đống code rối.

 

Bài viết chỉ thể hiện quan điểm cá nhân của tác giả và mang tính tham khảo. Chúng tôi không chịu trách nhiệm cho bất kỳ rủi ro nào phát sinh từ việc sử dụng thông tin trong bài viết.