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

Sử dụng SASS trung cấp 1 – @variable và @import8 phút đọc

Ở bài viết trước mình đã giới thiệu đến các bạn SASS là gì và tại sao nên sử dụng nó trong những dự án làm website của bạn trong tương lai.Đồng thời bài viết đó cũng hướng dẫn bạn sử dụng chức năng cơ bản nhất của SASS đó là viết thuộc tính CSS lồng nhau.

Trong bài viết sử dụng SASS trung cấp 1 tiếp theo này mình sẽ tiếp tục hướng dẫn các bạn sử dụng $biến và @import.Đây là hai chức năng nữa của SASS sẽ giúp bạn bảo trì sửa chữa và nâng cấp code một cách dễ dàng.

Sử dụng SASS trung cấp 1 –  comment

Trong CSS để ghi chú lại những gì đã làm thì chúng ta sẽ viết phần ghi chú đó bên trong dấu /* */ như thế này /* Đây là phần comment trong CSS của tôi */.

Còn trong SASS thì để lưu lại những ghi chú cần thiết chúng ta sẽ sử dụng hai dấu // và sau đó là những dòng comment của bạn.Ví dụ như thế này // Đây là phần comment trong SASS của tôi.

Bạn có thể thấy rằng comment hay ghi chú trong SASS chỉ có tác dụng trên một dòng, muốn comment trên nhiều dòng thì bạn phải lặp đi lặp lại dấu // ở đầu mỗi dòng.Điều này khá bất tiện nhưng đây là chức năng cố định của SASS nên chúng ta không còn cách nào khác.

Thêm một lưu ý nữa là khi bạn viết comment sử dụng dấu /*  */  trong SASS thì nó sẽ xuất hiện trong file CSS sau khi được biên dịch ra.

Ngược lại thì khi bạn comment sử dụng dấu // thì đoạn comment này chỉ xuất hiện trong file SASS mà thôi và nó sẽ không xuất hiện trong file CSS sau khi được biên dịch thành công.

Điều này rất thuận tiện khi làm dự án vì bạn có thể lưu lại những ghi chú riêng cho cá nhân và những ghi chú dành cho đồng nghiệp.

 

Sử dụng SASS trung cấp 1 – $biến_số

Lợi ích khi sử dụng $biến_số

Trong SASS chúng ta có thể sử dụng biến số như bao ngôn ngữ lập trình khác.Điều này có ý nghĩa vô cùng to lớn và giúp ích rất nhiều cho việc bảo trì hay tái sử dụng code.

Ví dụ như trong website bạn sử dụng một màu chủ đạo là màu #000 chẳng hạn.Lúc này bạn chỉ việc tạo ra một biến có tên $main-color và gán giá trị màu #000 cho nó.Khi nào cần sử dụng đến màu đó thì bạn gọi biến đó ra thay vì gõ trực tiếp tên màu như thông thường.

Điểm lợi hại của nó là khi bạn muốn thay đổi màu chủ đạo của website thì bạn chỉ việc thay đổi một chỗ duy nhất đó là giá trị màu của biến $main-color mà thôi.Giá trị màu sẽ thay đổi tại tất cả nơi bạn đã sử dụng biến $main-color.

Khi bạn tạo ra một file chứa toàn bộ những biến trong dự án thì bạn có thể chia sẻ nó cho những đồng nghiệp trong nhóm.Đồng nghiệp của bạn nhận file này và chỉ cần sửa giá trị biến thôi là sẽ có thêm nhiều phương án hay hơn.Điều này sẽ giúp làm việc nhóm hiệu quả hơn và nhanh chóng tìm ra được những phương án tối ưu nhất nếu gặp khó khăn.

Cách sử dụng $biến_số

Để khai báo một biến số thì bạn cần gõ dấu $ ở đầu và theo sau đó là tên biến cùng dấu : ngăn cách giữa tên biến và giá trị của biến.Như ở ví dụ trên thì mình đã khai báo biến có tên $main-color và gán giá trị màu #000 cho nó.

Giờ để sử dụng biến $main-color này thì mình chỉ việc gọi tên biến đó ra mà thôi.Ví dụ trong class .box mình muốn sử dụng màu background là màu #000 thì thay vì mình gõ trực tiếp tên màu #000 thì mình gọi tên biến $main-color ra là xong.

Cách sử dụng biến trong SASS không có nhiều nguyên tắc như những ngôn ngữ khác nên mình tin là ai cũng có thể thành thạo nó ngay lập tức.

Dưới đây là một số trường hợp sử dụng biến trong SASS phổ biến.

Breakpoint

Sử dụng biến $breakpoint này rất phổ biến trong thực tế làm website hiện nay.Thay vì nhớ và gõ từng số thì bạn có thể gõ trực tiếp tên biến bằng chữ rất trực quan dễ hiểu và tránh được nhầm lẫn.

Color

Mọi dự án dùng SASS gần như chắc chắn sẽ sử dụng biến liên quan đến màu sắc.Lý do vì sự tiện lợi của nó như mình đã nói ở trên.Bạn có thể thay đổi một màu nào đó tại nơi bạn đặt biến trên website chỉ bằng cách thay đổi giá trị màu của biến $color.

Font-family

Một ví dụ cũng thường xuyên gặp trong những dự án sử dụng SASS đó là sử dụng biến liên quan đến font-family.Tương tự như biến color thì bạn cũng có thể thay đổi font chữ tại nơi bạn đặt biến trên website bằng cách thay đổi giá trị của biến $font-family.

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

Trong một dự án làm website bạn sẽ phải viết CSS cho rất nhiều trang khác nhau và nếu bạn chỉ viết toàn bộ CSS trên một file SASS thì sau này sẽ rất khó bảo trì sửa chữa hay nâng cấp vì số lượng code là rất lớn.

Để giải quyết vấn đề này thì SASS có chức năng import nhiều file vào một file SASS chính sau đó mới biên dịch thành CSS sau.

_variables.scss

Đầu tiên chúng ra cần tạo ra file sẽ được import vào trong file SASS chính.File được sử dụng để import cũng giống như một file SASS thông thường nhưng nó có thêm dấu ( _ ) là dấu gạch dưới ở đầu tên file.

Như ở ví dụ trên mình đã tạo ra một file _variables.scss rồi lưu toàn bộ những biến trong dự án vào đó.File _variables.scss này mình lưu trữ trong thư mục abstracts là thư mục ngay trong thư mục lớn sass.

style.scss

Giờ để sử dụng được biến trong file style.scss thì mình cần kéo giá trị file _variables.scss vào trong file style.scss.Cách gọi file import rất đơn giản.

Bạn gõ @import rồi trong dấu nháy đơn ( ‘ ‘ ) ngay phía sau bạn hãy điền thông tin đường dẫn đến file import.Ví dụ ở trên mình gọi file _variables.scss mà file lại nằm trong thư mục abstracts nên mình phải gõ như sau ‘abstracts/variables’.

Bạn lưu ý là bạn không cần gõ dấu gạch chân ở đầu file import hay phần mở rộng của nó đâu nhé.Chỉ cần gõ đúng tên file là ok.

style.css

Sau khi biên dịch file style.scss ở trên ra file style.css thì ta sẽ có kết quả như trên.

Cấu trúc file SASS cơ bản

Dưới đây là cấu trúc một thư mục SASS cơ bản mà mình thường xuyên sử dụng trong những dự án thực tế của mình.Bạn có thể tham khảo và tạo ra một thư mục tương tự cho mình.

Thư mục lớn nhất ở đây là thư mục sass và bên trong nó có nhiều thư mục con khác nhau.Mỗi thư mục sẽ chứa nhiều file @import được phân loại theo chức năng và công dụng của chúng.

Khi bạn sửa CSS một phần nào đó trên website thì bạn có thể nhanh chóng xác định xem CSS chỗ cần sửa nằm ở phần nào trên website rồi từ đó tìm đến file SASS một cách nhanh chóng.

Sau này nếu có thêm bớt code CSS cũng chỉ cần vào file SASS tương ứng sửa là được.

 

Kết luận

Qua bài viết này mình đã giới thiệu đến các bạn hai chức năng rất quan trọng khi sử dụng SASS trung cấp đó là sử dụng $biến  và @import.

Kết hợp kiến thức viết CSS lồng nhau sử dụng SASS trong bài trước kết hợp với bài này nữa là bạn đã có thể tự tin viết SASS cho những dự án không quá lớn và phức tạp rồ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