Vừa qua, một buổi Workshop trực tuyến đầy ý nghĩa với chủ đề “Viết CSS chuyên nghiệp với SCSS/SASS” đã diễn ra qua nền tảng Google Meet, thu hút sự tham gia của đông đảo sinh viên chuyên ngành Web khóa 19 và 20 FPT Polytechnic Cần Thơ. Với sự dẫn dắt của hai diễn giả giàu kinh nghiệm – Thầy Phan Văn Tính và Cô Lê Ngọc Đào, buổi Workshop không chỉ mang đến những kiến thức chuyên sâu về SCSS/SASS mà còn mở ra một hướng đi mới trong việc phát triển giao diện web chuyên nghiệp.
Tầm quan trọng của việc viết code chuyên nghiệp với SCSS/SASS
Mở đầu buổi Workshop, Thầy Phan Văn Tính đã chia sẻ về tầm quan trọng của việc nâng cao kỹ năng viết CSS trong bối cảnh các dự án web ngày càng phức tạp. Thầy nhấn mạnh rằng CSS truyền thống, dù đơn giản và dễ tiếp cận, lại bộc lộ nhiều hạn chế khi áp dụng vào các dự án lớn. “CSS chỉ phù hợp với những dự án nhỏ vì nó thiếu tính linh hoạt và khả năng tái sử dụng. Khi dự án mở rộng, việc quản lý mã nguồn CSS trở nên rối rắm, dễ dẫn đến xung đột và khó bảo trì”, thầy giải thích.
Cô Lê Ngọc Đào bổ sung rằng SCSS và SASS – hai bộ tiền xử lý CSS (CSS Preprocessors) – chính là giải pháp tối ưu cho các lập trình viên hiện đại. SCSS/SASS mang lại tính linh hoạt cao nhờ các tính năng như biến (variables), lồng ghép (nesting) và mixin, giúp quản lý mã nguồn hiệu quả hơn. “Khi làm việc nhóm hoặc trên các dự án lớn, SCSS/SASS đảm bảo tính nhất quán trong giao diện và tiết kiệm thời gian phát triển”, cô Đào khẳng định. Những chia sẻ này đã giúp sinh viên nhận ra sự cần thiết của việc chuyển đổi từ CSS truyền thống sang SCSS/SASS.
CSS truyền thống và ưu điểm vượt trội của SCSS/SASS
Để làm rõ sự khác biệt, Thầy Tính đã so sánh cách viết CSS thông thường với SCSS/SASS. Với CSS, lập trình viên thường phải lặp lại nhiều đoạn code giống nhau, gây khó khăn trong việc thay đổi giao diện toàn cục. Trong khi đó, SCSS/SASS cho phép định nghĩa biến để lưu trữ các giá trị như màu sắc, kích thước, sau đó tái sử dụng ở nhiều nơi.
Ví dụ, thay vì viết color: #ff5733 nhiều lần, ta có thể khai báo $primary-color: #ff5733 và sử dụng lại. Điều này không chỉ tiết kiệm thời gian mà còn giúp dễ dàng điều chỉnh giao diện chỉ bằng một thay đổi duy nhất.
Ngoài ra, tính năng lồng ghép (nesting) của SCSS/SASS cũng được Cô Đào nhấn mạnh. Thay vì viết các đoạn CSS rời rạc, lập trình viên có thể tổ chức code theo cấu trúc giống HTML, giúp mã nguồn trở nên trực quan và dễ đọc hơn. “Đây là cách để các bạn viết code không chỉ đẹp mà còn thông minh”, cô chia sẻ.
Quy trình biên dịch từ SCSS/SASS sang CSS
Một phần quan trọng của buổi Workshop là giải thích quy trình biên dịch từ SCSS/SASS sang CSS. Thầy Tính giải thích rằng SCSS/SASS không thể chạy trực tiếp trên trình duyệt mà cần được biên dịch thành CSS thuần bằng các công cụ như Node-sass, Sass compiler hoặc tích hợp trong các framework như Webpack. Quy trình này bao gồm việc viết code bằng cú pháp SCSS/SASS, sau đó sử dụng công cụ biên dịch để chuyển thành CSS mà trình duyệt hiểu được.
Cú pháp cơ bản của SCSS và SASS
Tiếp nối phần lý thuyết, Cô Đào đã trình bày các cú pháp cơ bản của SCSS và SASS. SCSS (Sassy CSS) sử dụng cú pháp gần giống CSS với dấu ngoặc nhọn {} và dấu chấm phẩy ;, trong khi SASS dựa trên cú pháp thụt đầu dòng (indentation) tương tự Python, không cần dấu ngoặc hay chấm phẩy.
Thực hành cùng sinh viên
Điểm nhấn của buổi Workshop là phần thực hành, nơi thầy Tính và cô Đào cùng các bạn sinh viên viết các đoạn code CSS bằng SCSS/SASS. Các bài tập nhỏ như tạo giao diện button, định dạng danh sách menu đã giúp sinh viên hiểu rõ cách áp dụng biến, nesting và mixin vào thực tế. Một sinh viên khóa 19 chia sẻ: “Trước đây mình chỉ biết CSS cơ bản, nhưng sau buổi Workshop, mình thấy SCSS dễ dùng và mạnh mẽ hơn rất nhiều. Mình sẽ áp dụng vào dự án môn học sắp tới”.
Kết thúc đầy cảm hứng
Buổi Workshop khép lại với sự hào hứng và những phản hồi tích cực từ sinh viên. Những kiến thức từ Thầy Phan Văn Tính và Cô Lê Ngọc Đào không chỉ giúp các bạn hiểu rõ hơn về SCSS/SASS mà còn khơi dậy niềm đam mê viết code chuyên nghiệp. Với những gì đã học, sinh viên FPT Polytechnic Cần Thơ giờ đây đã sẵn sàng nâng tầm kỹ năng, chuẩn bị cho các dự án thực tế trong tương lai. Đây chắc chắn là một bước tiến quan trọng trên hành trình trở thành những lập trình viên Web xuất sắc.
Giảng viên Nguyễn Đình Ngọc
Bộ môn Công nghệ thông tin
FPT Polytechnic Cần Thơ
