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

5 thủ thuật về màu sắc trong CSS sử dụng SASS7 phút đọc

Trong quá trình viết CSS cho một website chắc chắn bạn sẽ phải thường xuyên làm việc với màu sắc và trong bài viết này mình sẽ giới thiệu đến các bạn 5 kĩ thuật về màu sắc trong CSS sử dụng SASS.

Qua đó bạn sẽ nắm rõ hơn cách sử dụng SASS trong thực tế cũng như có thêm kinh nghiệm để sau này làm các dự án trong tương lai.

Đơn giản hóa cách viết RGBA

Trong thực tế nhiều trường hợp bạn phải sử dụng mã màu RGB thay vì sử dụng mã màu HEX nếu muốn tạo ra các hiệu ứng đẹp mắt bằng CSS.Nhưng hầu hết các website gợi ý màu sắc trên thế giới đều cho copy mã màu dưới dạng HEX.

SASS

Như ví dụ trên đây mình có khai báo biến $main-color với mã màu là #e67e22, giờ mình có thể gọi luôn biến này ra trong giá trị màu RGBA để sử dụng mà không cần tạo ra một bước chuyển từ mã màu HEX sang mã màu RGB như thông thường.

Bạn lưu ý là điều này chỉ có tác dụng trong SASS mà thôi nhé.Bình thường viết kiểu này trong CSS sẽ gặp lỗi ngay.

CSS

Đoạn code viết bằng SASS trên sau khi biên dịch ra CSS sẽ có kết quả như trên đây.

Bạn có thể chuyển từ mã màu HEX sang RGB thủ công bằng cách sử dụng công cụ online dưới đây :

Điều chỉnh độ sáng tối của màu sắc

Đầu tiên bạn cần chỉ định một màu sắc làm gốc sau đó từ màu sắc gốc bạn sẽ thiết lập để điều chỉnh độ sáng tối bao nhiêu %.Nếu bạn muốn màu sắc hiện tại sáng hơn thì sử dụng tham số lighten và ngược lại nếu bạn muốn màu sắc hiện tại tối đi thì bạn sử dụng tham số darken.

Công thức sử dụng đơn giản như sau :

Có lẽ đến đây vẫn khá khó hiểu với nhiều bạn nên mình sẽ giải thích thêm qua ví dụ dưới đây.

SASS

Ở ví dụ này mình muốn làm cho màu gốc $main-color: #2980b9; sáng lên thêm 15% tại link a.Mình sẽ khai báo theo đúng công thức ở trên và có kết quả là color: lighten($main-color, 15%);.

CSS

Khi biên dịch ra CSS sẽ hiện đúng màu mà mình đã thiết lập ở trên là màu #55a5d9 thay vì màu gốc #2980b9.

Điều chỉnh độ bão hòa của màu sắc

Tương tự như trong điều chỉnh độ sáng tối của màu sắc ở trên thì với điều chỉnh độ bão hòa của màu sắc bạn cũng phải chỉ định một màu gốc.Sau đó bạn sẽ điều chỉnh độ bão hòa hay bất bão hòa theo hai tham số là saturatedesaturate.

Công thức sử dụng như dưới đây :

SASS

Cách khai báo và sử dụng giống hệt như với lightendarken nên mình chỉ lấy ví dụ làm mẫu.Các bạn hãy mở trình soạn thảo code lên copy ví dụ và xem kết quả bằng trình duyệt để hiểu rõ hơn nhé.

CSS

Khi biên dịch code của ví dụ trên ta có kết quả như trên đây.

Dưới đây mình có để link đến website giúp bạn theo dõi trực quan sự thay đổi của 4 chỉ số lighten, darken, saturatedesaturate.Bạn chỉ cần nhập màu vào và quan sát kết quả.

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

Kết hợp hai ví dụ trên với @mixin

Giờ mình sẽ lấy một ví dụ trong thực tế mà mình thường xuyên gặp phải trong khi sử dụng SASS cho các bạn.Ví dụ này liên quan đến màu sắc link khi ta trỏ chuột vào và khi ta đã kích chuột vào link.

SASS

Mình sẽ khai báo một mixin với biến $color, khi trỏ chuột :hover vào thì mình sẽ tăng độ sáng màu link (lighten) lên 25% và khi đã kích chuột vào link :visited thì mình sẽ cho màu sắc link bão hòa (desaturate) 30%.

Cuối cùng mình chỉ việc gọi mixin này ra trong link mình muốn sử dụng và thêm màu sắc vào cho nó là xong.

CSS

@mixin tạo Gradient cho Background

Sử dụng mixin để tạo gradient chỉ từ một màu gốc duy nhất trong SASS cũng là một trường hợp hay gặp trong các dự án thực tế.Dưới đây mình có giới thiệu đến các bạn một mixin tạo gradient cho background.

SASS

Đầu tiên mình khai báo một @mixin với tên bg-gradient bên trong gồm ba biến là : $angle, $color, $amount.Biến số $angle sẽ chỉ định góc đổ màu, biến số $color sẽ chỉ định màu sắc gốc và cuối cùng biến $amount sẽ chỉ định % biến đổi màu sắc.

Tiếp theo mình thêm thuộc tính background với tham số dải màu linear-gradient, bên trong nó có các biến số như trên nhưng thêm một hàm giúp sinh ra màu mới đó là adjust-hue().

Việc còn lại chỉ là gọi @mixin gradient này ra tại vị trí mong muốn và truyền vào cho nó các giá trị tương ứng với các biến ở trên.

CSS 

Kết quả đơn sẽ như trên đây.Bạn hãy thử copy code về rồi sửa các giá trị của biến để hiểu rõ hơn nhé.

@mixin tạo Gradient cho Text

Tái sử dụng code trong phần @mixin tạo Gradient cho background chúng ta có thể tiếp tục tạo ra Gradient cho text.Mình sẽ giải thích qua một vài điểm mới trong khi tạo Gradient với text so với background.
HTML

Đầu tiên bạn cần một đoạn text bất kì.Ở đây mình lấy luôn tên blog của mình và gắn cho nó thẻ h1.

SASS

Để tạo Gradient cho text bạn chỉ việc thêm hai dòng code sau vào trong @mixin : -webkit-text-fill-color: transparent; -webkit-background-clip: text;.

Sau đó bạn gọi @mixin này ra tại nơi bạn muốn sử dụng.Tiếp đến là thêm một số định dạng chữ nữa.Cuối cùng để đoạn text này luôn nằm giữa thì mình có thêm một số code trong phần body.

CSS

Trên đây là đoạn code CSS sau khi biên dịch từ SASS ra.

Kết luận

Trên đây mình đã giới thiệu đến các bạn những ví dụ về màu sắc trong CSS vận dụng SASS.Hi vọng bạn sẽ áp dụng được chúng vào trong dự án của mình.

Sắp tới mình sẽ tiếp tục chia sẻ những ví dụ thực tế về SASS mà mình sưu tầm được trong quá trình làm việc đến các bạn.Hãy luôn theo dõi và ủng hộ blog bạn nhé.

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