Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > [Share] SASS Cheat Sheet dùng viết css cực nhanh
[Share] SASS Cheat Sheet dùng viết css cực nhanh
Nguyễn Trung Hiếu
Share Code Web Company 2017

[Share] SASS Cheat Sheet dùng viết css cực nhanh

Một vài SASS Cheat Sheet đơn giản giới thiệu đến các bạn

SASS là gì?

Về SASS là gì thì mình không giới thiệu lại nữa vì có nhiều bài viết trên mạng đã giới thiệu về nó rồi, các bạn có thể tham khảo tài liệu tiếng anh chính thống tại đây.

SASS là một CSS Prepocessor (như LESS) giúp bạn viết CSS nhanh hơn và có cấu trúc rõ ràng hơn. Với SASS, bạn có thể viết CSS theo thứ tự rõ ràng, quản lý các biến đã được định nghĩa sẵn, có thể tự động nén tập tin CSS lại để bạn tiết kiệm dung lượng.

– Thạch Phạm

Về cơ bản các bạn có thể hình dung SASS sẽ giúp viết CSS như một ngôn ngữ lập trình. Do đó, để có thể chạy được SASS cần phải có trình biên dịch. Ví dụ:

  • Windows: Có thể sử dụng Compass, Koala, Prepros
  • MacOS: CodeKit

Các trình biên dịch này sẽ thực hiện “dịch” tập tin SASS ra file CSS để đưa lên web và dùng bình thường.
Trong bài này mình chia sẻ cho các bạn tập cú pháp viết nhanh trong SASS giúp các bạn tiện tra cứu trong quá trình viết code.
sass cheat sheet - viết css cực nhanh

sass cheat sheet

Sass & Gulp

Variables

Nguyên tắc đặt tên biến và cách khai báo cũng giống với đa phần các ngôn ngữ lập trình khác. Về cơ bản ta sử dụng ký tự $ (giống với jquery) để khai báo biến.

Interpolation

Math

Thậm chí có thể thực hiện tính toán như các ngôn ngữ lập trình.

Nesting

Giả sử ta viết một đoạn code để style cho danh sách như này:
nesting in sass
Kết quả ta sẽ được giống như này:
nesting in css

Conditionals

Mệnh đề điều kiện với if

Mixins

Đây là kỹ thuật giúp các bạn có thể sử dụng lại những đoạn code đã được viết trước đó và có tính lặp lại nhiều lần giống như các chương trình con hoặc hàm trong ngôn ngữ lập trình. Khi nào cần sử dụng những đoạn css giống nhau các bạn chỉ cần gọi “hàm” là đủ.

For Loops

Tương tự, chúng ta có thể sử dụng vòng lặp for để viết code

Each

Hoặc vòng lặp với Each

Trên đây là toàn bộ cách viết trong SASS được cô đọng lại giúp các bạn dễ nhớ, dễ thực hành trong quá trình hoàn thiện dự án của mình. Nếu có vấn đề gì trong nội dung bài viết cần trao đổi, hãy comment bên dưới nhé!

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 8.378 hits
%d bloggers like this: