hướng dẫn học và sử dụng sass toàn tập

Giới thiệu series học và sử dụng SASS toàn tập7 phút đọc

Chào mừng bạn đến với series bài viết học và sử dụng SASS toàn tập trên blog Web Design Ideas.Đây là một series mới với nhiều bài viết chất lượng chia sẻ những kiến thức cơ bản từ A đến Z về SASS.

Series bài viết áp dụng triết lý học đi đôi với hành nên sau mỗi phần lý thuyết khô khan đều sẽ đi kèm ví dụ minh họa.Hãy cùng mình tìm hiểu xem series này có gì thú vị nhé.

Giới thiệu series học và sử dụng SASS toàn tập

Đây là một trong những series bài viết được mình đầu tư rất kĩ lưỡng với mong muốn sau khi học xong series này bạn có thể sử dụng SASS thành thạo dù bạn không biết gì về lập trình.

Yêu cầu duy nhất khi đến với series này là bạn cần thành thạo HTML và CSS vì đây là kiến thức nền tảng bắt buộc phải có nếu muốn vận dụng SASS trong dự án.

Tất cả những khái niệm cơ bản đến cách sử dụng SASS kèm theo đó là công cụ biên dịch từ SASS sang CSS đều được mình giới thiệu một cách chi tiết khoa học theo thứ tự rất dễ theo dõi.

Bài viết trong series từ A đến Z

Biên dịch SASS sang CSS sử dụng Prepros

biên dịch sass sang css sử dụng prepros

Một trong những điều kiện bắt buộc khi sử dụng SASS đó là phải biên dịch từ file SASS sang file CSS để có thể sử dụng trong dự án.Trong rất nhiều cách biên dịch SASS sang CSS thì mình thấy cách nhanh chóng và hiệu quả nhất đó là sử dụng phần mềm bên thứ ba hỗ trợ.

Trước đây mình có sử dụng phần mềm Koala để biên dịch SASS sang CSS nhưng thời gian gần đây mình đã chuyển qua sử dụng phần mềm Prepros.Mình đã viết lại rất chi tiết cách sử dụng phần mềm này.Hi vọng các bạn yêu thích và sử dụng nó.

 

Biên dịch SASS sang CSS trên VS Code

biên dịch sass sang css trên VS Code

Nếu bạn đang sử dụng trình soạn thảo code Visual Studio Code thì bạn có thể sử dụng Extension Live SASS Compiler để biên dịch SASS sang CSS một cách tự động.

Bài viết này sẽ giải thích chi tiết và dễ hiểu nhất cách sử dụng Extension Live SASS Compiler trên trình soạn thảo Visual Studio Code để biên dịch SASS sang CSS.

 

SASS là gì ? Hướng dẫn sử dụng SASS cơ bản

sass là gì ? hướng dẫn sử dụng sass cơ bản

Đây là bài thứ ba trong series hướng dẫn học và sử dụng SASS toàn tập.Ngoài giải thích những khái niệm cơ bản như “SASS là gì ?“, “sự khác nhau giữa hai cách viết SASS và SCSS” thì bài viết cũng hướng dẫn các bạn viết CSS lồng nhau trong SASS.

Đây là kiến thức quan trọng bậc nhất mà bất cứ ai sử dụng SASS để viết CSS đều phải thành thạo.

 

Sử dụng SASS trung cấp 1 – @variable và @import

hướng dẫn sử dụng sass trung cấp 1

Khi đã quen với cách viết CSS lồng nhau trong SASS rồi bạn sẽ chuyển qua học sử dụng @variable@import.Đây là hai vũ khí vô cùng lợi hại của SASS sẽ giúp bạn quản lý, bảo trì và nâng cấp code một cách dễ dàng nhanh chóng.

Ngoài ra bài viết cũng hướng dẫn bạn comment trong SASS và giải thích rõ sự khác nhau giữa comment trong SASS với comment trong CSS.Cuối bài là ví dụ về cấu trúc thư mục SASS mà mình thường sử dụng trong những dự án của công ty để bạn tham khảo.

 

Sử dụng SASS trung cấp 2 – @extend và @mixin

hướng dẫn sử dụng sass trung cấp 2

Ngoài @variable@import thì SASS còn có hai vũ khí lợi hại nữa đó là @extend@mixin.Vai trò của @extend@mixin trong SASS đều là hỗ trợ tái sử dụng code.

Cách sử dụng của chúng khá giống nhau nên thường gây nhầm lẫn.Do đó sau khi giải thích cách sử dụng @extend @mixin kèm theo ví dụ minh họa thì mình có phân biệt trường hợp sử dụng @extend@mixin.

Cuối bài là hướng dẫn sử dụng %name, một hàm có vai trò như @extend@mixin nhưng cách sử dụng lai cả hai loại với nhau.

 

Sử dụng SASS nâng cao – @for – @if – @each

hướng dẫn sử dụng sass nâng cao

Khi sử dụng thành thạo tất cả những kiến thức trong các bài viết trên rồi thì bạn hãy tìm hiểu thêm về cách sử dụng @for@if@each.Đây đều là những kiến thức khá khó và ít sử dụng trong những dự án vừa và nhỏ.

Tuy nhiên bạn cũng nên học để biết qua là chúng có tồn tại.Nếu bạn biết vận dụng những kiến thức nâng cao này vào trong thực tế thì code của bạn sẽ trở nên linh họat hơn rất nhiều.

 

5 thủ thuật về màu sắc trong CSS sử dụng SASS

kĩ thuật màu sắc trong css sử dụng sass

Sau khi kết thúc phần lý thuyết về học và sử dụng SASS toàn tập thì chúng ta sẽ đến với các bài viết mang tính ứng dụng.Phần lớn kiến thức trong phần này là mình sưu tập trên mạng hoặc tự bản thân mình ngộ ra trong quá trình sử dụng SASS.

Bài đầu tiên về ứng dụng SASS trong thực tế đó là bài chia sẻ những ví dụ liên quan đến màu sắc trong CSS.Bạn sẽ bất ngờ vì những gì SASS có thể làm với màu sắc thông qua ví dụ trong bài viết.

 

Ngoài những kiến thức mà mình chia sẻ ở trên bạn có thể truy cập vào website của SASS để tìm hiểu thêm qua link dưới đây.

Kết luận

Nhiều công ty ở Việt Nam cũng như Nhật Bản hiện nay yêu cầu nhân viên sử dụng SASS viết CSS để cải thiện thời gian viết code và tối ưu code một cách tốt nhất.Để bắt kịp xu thế đó bạn nên bắt đầu học SASS ngay hôm nay.

Sử dụng SASS viết CSS không hề khó nhưng để thành thạo nó và sử dụng một cách linh hoạt thì không phải đơn giản.Hi vọng qua series bài viết này bạn sẽ hiểu hơn về SASS và yêu thích nó.

Chúc bạn luôn thành công trong công việc và hẹn gặp lại bạn trong những series bài viết sắp tới.

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x