Ngôn ngữ Sass - Khóa video trên F8

Học Sass để dự án CSS phình to mà cấu trúc vẫn rõ ràng.

Dành cho người đã biết CSS cơ bản nhưng bắt đầu gặp code lặp, selector khó lần theo và nhiều file chưa thành một hệ thống có thể mở rộng.

Module @use và @forward Mixins và logic tái sử dụng 7-1 Pattern và Grid System

Mua riêng khóa Ngôn ngữ Sass, hoặc học ngay nếu bạn đã sở hữu HTML CSS Pro.

Học phí mua riêng299.000đ~~400.000đ~~

27 video6 giờ 18 phútĐang mở đăng ký

Học thử miễn phí

Học thử trước khi quyết định. Khóa học không cam kết việc làm, thu nhập hoặc việc Sass là lựa chọn bắt buộc cho mọi dự án.

Tự kiểm tra độ phù hợp

Bạn không cần học Sass chỉ vì đã biết CSS.

Khóa học phù hợp khi vấn đề của bạn đã chuyển từ viết được giao diện sang giữ cho stylesheet dễ đọc, dễ sửa và có quy tắc dùng lại.

Đã viết được CSS cơ bản

Bạn hiểu selector, cascade, Flexbox, Grid và responsive, nhưng stylesheet bắt đầu dài và khó lần theo.

Đang lặp lại cùng một quy tắc

Màu sắc, khoảng cách, breakpoint và nhóm thuộc tính xuất hiện ở nhiều nơi, khiến mỗi lần sửa đều tốn công kiểm tra.

Muốn tự tổ chức hệ thống CSS

Bạn muốn hiểu cách chia file, dùng module, tái sử dụng logic và tạo Grid System thay vì chỉ cài một thư viện có sẵn.

Chưa phù hợp nếu

Bạn chưa nắm CSS cơ bản, chỉ muốn chép một cấu trúc 7-1 có sẵn, hoặc đang tìm công cụ thay thế hoàn toàn cho việc hiểu cascade và specificity.

Xem lộ trình HTML CSS Pro

Điểm nghẽn thật không nằm ở cú pháp

CSS vẫn chạy, nhưng mỗi lần sửa lại khó đoán điều gì sẽ bị ảnh hưởng.

Một thay đổi lan ra quá nhiều nơi

Cùng một giá trị nằm rải rác trong nhiều file. Khi thiết kế đổi, bạn tìm và sửa thủ công rồi vẫn lo bỏ sót.

Selector lồng sâu nhưng không rõ quan hệ

Nesting giúp code ngắn hơn, nhưng nếu thiếu cấu trúc, chính phần code rút gọn lại làm tăng độ khó khi đọc và ghi đè.

Có nhiều file nhưng chưa thành hệ thống

Tách file chỉ là bước đầu. Bạn vẫn cần biết phần nào được dùng chung, phần nào riêng tư và đường đi từ module tới CSS đầu ra.

Sass không tự làm code sạch. Giá trị của nó xuất hiện khi bạn dùng cú pháp để tạo ranh giới, giảm lặp và làm cho CSS đầu ra dễ kiểm tra hơn.

Một hệ thống biên dịch, không chỉ là nesting

Bốn lớp tư duy nối từ một giá trị thiết kế tới CSS chạy trên trình duyệt.

Biến và quy tắc dùng lại

Đưa giá trị lặp lại về variables, gom nhóm hành vi bằng mixins và chọn đúng lúc dùng extend hoặc placeholder.

Module có ranh giới rõ

Tổ chức partials, hiểu hạn chế của @import cũ và dùng @use, @forward để biết một thành phần đến từ đâu.

Sinh CSS bằng logic có kiểm soát

Dùng value, operator, interpolation, điều kiện và vòng lặp khi chúng thật sự giảm lặp và giữ đầu ra dễ kiểm tra.

Kiến trúc và Grid System

Đặt các phần vào cấu trúc 7-1, sau đó tự xây container, row, column, gutter, offset và row-cols bằng Sass.

Ranh giới cần nói rõ

CSS hiện đại đã có nesting, nhưng Sass vẫn giải quyết những việc khác.

Trình duyệt hiện có thể đọc CSS nesting trực tiếp. Vì vậy, khóa học không bán Sass như một phép màu giúp viết selector ngắn hơn. Trọng tâm hợp lý hơn là module, mixins, functions, điều kiện, vòng lặp và quy trình sinh CSS trước khi đưa vào trình duyệt.

Bạn cũng học cách nhận biết @import cũ và chuyển tư duy sang @use, @forward, phù hợp với module system hiện tại của Dart Sass.

CSS nestingTrình duyệt xử lý

Lồng selector và at-rule trực tiếp trong CSS.

SassBiên dịch trước

Module, mixins, functions, logic và CSS được sinh ra.

Lộ trình trong 27 video

Đi từ cú pháp tới một Grid System mà bạn tự giải thích lại được.

Bốn chặng dưới đây tóm lược nội dung đang có trong khóa, không thêm project, chứng chỉ hoặc đầu ra chưa được công bố.

Chặng 1

Từ CSS sang tư duy Sass

Cài đặt, biên dịch, phân biệt Sass/SCSS, nesting, variables, extend, placeholder và mixins.

Cài đặt và lệnh biên dịch
Nested rules và variables
Extend và placeholder selector
Mixins, @media và @content

Chặng 2

Tổ chức module thay vì chia file theo cảm giác

Partials, @import, @use, @forward và cách đặt từng nhóm stylesheet vào kiến trúc 7-1.

Partials và phạm vi file
Nhận biết @import cũ
@use và @forward
7-1 Pattern

Chặng 3

Dùng logic để giảm lặp

Giá trị, toán tử, interpolation, if/else và vòng lặp trong những tình huống có đầu ra CSS rõ ràng.

Kiểu giá trị và toán tử
Nội suy trong Sass
Điều kiện if/else
Vòng lặp sinh quy tắc

Chặng 4

Tự xây một Grid System hoàn chỉnh

Đi từ cơ chế Grid System đến container, row, column, row-cols, gutters, offset, tối ưu và áp dụng vào layout.

Container, row và column
Row-cols, gutters và offset
Tối ưu code Grid System
Ứng dụng vào layout

Muốn kiểm tra cách giảng trước khi mua?

Mở bài học thử

Cách học trên F8

Video để hiểu luồng, Flashcards để nhắc lại khái niệm.

Khóa học được trình bày bằng video trên nền tảng F8. Flashcards hỗ trợ ôn lại thuật ngữ và cú pháp ngắn giữa các lần thực hành, thay vì thay thế việc tự viết và kiểm tra CSS đầu ra.

Học theo tiến độ cá nhân
Xem lại phần chưa rõ
Trao đổi tại khu vực bài học

Chọn đúng sản phẩm

Chỉ học Sass, hay cần cả nền tảng HTML CSS?

Mua riêng

Khóa Ngôn ngữ Sass

Phù hợp khi bạn đã vững CSS cơ bản và chỉ cần học cách tổ chức, tái sử dụng và sinh CSS bằng Sass.

Học phí mua riêng299.000đ~~400.000đ~~

27 video6 giờ 18 phútĐang mở đăng ký

Lộ trình đầy đủ hơn

Khóa HTML CSS Pro

Phù hợp khi nền CSS của bạn còn thiếu hoặc bạn muốn học Sass trong lộ trình giao diện rộng hơn. Nội dung Sass đã nằm trong khóa này.

Xem HTML CSS Pro

Điều người học nhớ về F8

Học kỹ hơn khi kiến thức được giải thích rõ và có chỗ để luyện lại.

Những chia sẻ dưới đây phản ánh trải nghiệm học trên nền tảng F8 nói chung. Kết quả của mỗi người sẽ khác nhau theo nền tảng và thời gian thực hành.

Flashcard ôn lại kiến thức lý thuyết cũng khá đầy đủ và bao quát, thoải mái sử dụng ( web , mobile ) đều được. Ghi chú : Note lại thoải mái luôn , cái note này là key của các anh chị đọc sách.

Tuan NguyenHọc viên khóa Pro

Thích chỗ mỗi phần lý thuyết đều đi kèm 4-5 bài tập, bài nào làm không ra thì có 3-4 phương án gợi ý support luôn (từ gợi ý => gợi ý nhiều => so sánh => full đáp án). rất tiện lợi!

Ngọc ĐoànHọc viên khóa Pro

Em cám ơn anh Sơn vì video này, nó truyền cho em được nhiều động lực, anh dạy kiến thức rất chi tiết và dễ hiểu, em chúc anh nhiều sức khỏe, em cám ơn anh rất nhiều

Kimi HòaHọc viên khóa Pro

Trước khi mua

Những câu cần rõ để tránh chọn sai khóa.

CSS hiện đại đã có nesting, tôi còn cần học Sass không?

CSS nesting hiện đã được trình duyệt hỗ trợ rộng rãi, nên khóa học không xem nesting là lý do duy nhất để dùng Sass. Giá trị còn lại nằm ở module @use/@forward, mixins, functions, điều kiện, vòng lặp và khả năng sinh một hệ thống CSS ở bước biên dịch. Hãy chọn Sass khi dự án cần những khả năng đó, không phải vì mọi dự án đều bắt buộc dùng.

Tôi chưa biết CSS có học được khóa này không?

Chưa nên. Khóa học giả định bạn đã hiểu selector, cascade, box model, Flexbox, Grid và responsive cơ bản. Nếu chưa có nền này, HTML CSS Pro là lộ trình phù hợp hơn và đã bao gồm nội dung Sass.

Khóa Sass mua riêng hay nằm trong HTML CSS Pro?

Cả hai. Ngôn ngữ Sass là một khóa riêng, bạn mua được độc lập. Nội dung này đồng thời được tách từ hai chương của HTML CSS Pro, nên ai đã sở hữu HTML CSS Pro thì không cần mua lại.

Khóa học diễn ra theo hình thức nào?

Đây là khóa video trên nền tảng F8: bạn học theo lộ trình có sẵn và hoàn toàn chủ động thời gian, không có lịch khai giảng hay lịch học cố định.

Tôi được truy cập khóa học trong bao lâu?

Thời hạn truy cập hiển thị ở bước đăng ký - bạn kiểm tra tại đó trước khi thanh toán, hoặc liên hệ F8 nếu cần xác nhận thêm.

Khi gặp bài khó, tôi được hỗ trợ thế nào?

Mỗi bài học đều có khu vực trao đổi để bạn đặt câu hỏi. F8 không cam kết thời gian phản hồi cụ thể; khi cần hỗ trợ về tài khoản hoặc đăng ký, bạn dùng kênh liên hệ của F8.

Tôi có thể học thử trước khi mua không?

Có. Khi không đi từ liên kết ưu đãi hoặc phiên học thử, nút Học thử miễn phí sẽ mở phần nội dung dùng thử để bạn kiểm tra cách trình bày và trải nghiệm học.

Còn lăn tăn?

Để tư vấn viên giúp bạn chọn đúng

Chưa chắc Sass có phải mảnh ghép tiếp theo của mình? Để lại thông tin, F8 sẽ trao đổi về nền CSS hiện tại của bạn và thứ tự học hợp lý - mua hay chưa, bạn vẫn nhận được lời khuyên thẳng.

Quà tặng miễn phíEbook “CSS hết rối”Bảy quy tắc đặt tên, chia file và dọn CSS cũ mà không làm vỡ trang.

Quyết định sau khi đã hiểu rõ

Học Sass khi vấn đề của bạn là cấu trúc, không chỉ là cú pháp.

Course 27 tập trung vào Sass và Grid System. Nếu nền CSS còn thiếu, hãy chọn HTML CSS Pro để không bỏ qua phần kiến thức đứng trước.

Học phí mua riêng299.000đ~~400.000đ~~

27 video6 giờ 18 phútĐang mở đăng ký

Học thử miễn phí