Giáo trình SASS/SCSS toàn tập

Khi viết code CSS thuần, các bạn không tránh khỏi sự nhàm chán vì code bị lặp đi lặp lại nhiều lần, hơn nữa còn mất thời gian maintaint sau này. Vì vậy SASS được sinh ra để giải quyết vấn đề này.

SASS viết tắt (Syntactically awesome style sheets) là một khái niệm mở rộng trong CSS. Cung cấp các cú pháp, phương thức giúp cho việc viết code CSS trở nên ngắn gọn, dễ ràng và tối ưu hơn. Nó cho phép kế thừa nên tiết kiệm thời gian và công sức cho developer.

Về bản chất SASS vẫn là CSS nên để học được SASS bạn bắt buộc phải có kiến thức cơ bản về CSS trước. Trong phạm vi của giáo trình này mình sẽ đề cập đến tất cả những kiến thức từ cơ bản đến nâng cao về SASS để các bạn có thể hiểu và sử dụng nó vào công việc của mình.

Giáo trình này được chia thành 3 chương, mỗi bài học trong các chương sẽ đề cập đến một khái niệm cụ thể trong SASS và có DEMO tương ứng để các bạn dễ hình dung hơn. Nội dung của giáo trình sẽ được cập nhật liên tục theo xu hướng công nghệ mới nhất về SASS, vì vậy các bạn nhớ đăng ký kênh hoặc đăng ký thành viên khi có cập nhật mới nhất của giáo trình này.

Chương 1. SASS Cơ bản

1. Giới thiệu tổng quan về Sass/Scss
2. Hướng dẫn cài đặt SASS
3. Các cú pháp cơ bản trong SASS
4. Câu lệnh về biểu thức trong SASS
5. Làm việc với biến trong SASS
6. Kiểu dữ liệu trong SASS
7. Các phép toán trong SASS
8. Nội suy biến trong SASS
9. Một số lưu ý trong khi sử dụng SASS

Chương 2. Các qui tắc trong SASS

1. Qui tắc về @
2. Sử dụng @mixins và @include
3. Sử dụng @use
4. Sử dụng @forward
5. Sử dụng @function
6. Sử dụng @extend
7. Sử dụng @if else hoặc @else if
8. Sử dụng vòng lặp @for, @each, @while
9. Sử dụng @error, @warn và @debug
10. Sử dụng @at-root

Chương 3. SASS nâng cao

1. Nested Rules và Nested Properties
2. Parent Selector Syntax
3. SASS Partials
4. Convert SASS to SCSS
5. SASS Build-in Modules

Cảm ơn các đã đón nhận giáo trình này, đừng quên ủng hộ chúng tôi bắng các Đăng ký kênh Youtube, Like Fanpage, nhấn đăng ký nhận thông báo trên website và ủng hộ các khóa học của SUNTECH VIỆT NAM

#sass_tutorial #suntechvietnam #frontend #css