Bạn có thể sử dụng các biến trong SCSS không?

Thiết lập các biến màu SCSS của bạn

Nếu bạn không quen thuộc với các biến trong SCSS, hãy xem hướng dẫn này để biết tổng quan nhanh (nhưng thành thật mà nói, chúng khá đơn giản). Các biến trong SCSS được bắt đầu bằng ký hiệu '$' và có thể được đặt tên theo bất kỳ tên nào bạn thích. Ở đây chúng ta sẽ thiết lập một số biến màu cơ bản để sử dụng sau này trong biểu định kiểu của chúng ta

SCSS
$color-red: #FF0000;
$color-green: #00FF00;
$color-blue: #0000FF;

Hãy nhớ rằng, để sử dụng các biến hoặc bất kỳ lợi ích nào của SCSS cho vấn đề đó, biểu định kiểu phải có '. scss' và bộ tiền xử lý phải là một phần của hệ thống xây dựng trang web của bạn. Để biết thêm thông tin về cách bắt đầu, hãy xem cách cài đặt Sass

Sử dụng các biến SCSS trong biểu định kiểu của bạn

Bây giờ chúng ta đã xác định một số biến màu, đã đến lúc đưa chúng vào hoạt động. Bạn có thể sử dụng các biến SCSS giống như cách bạn sử dụng các giá trị thông thường cho bất kỳ thuộc tính CSS nào, chỉ cần đảm bảo bao gồm tiền tố ký hiệu '$' để biểu thị trạng thái của biến

SCSS
h1 { color: $color-red; }
p { color: $color-green; }
a { color: $color-blue; }

Điều này sẽ xuất ra CSS với bất kỳ thứ gì bạn đã xác định ban đầu là giá trị của biến, trong ví dụ của chúng tôi, đầu ra sẽ như thế này

CSS
h1 { color: #FF0000; }
p { color: #00FF00; }
a { color: #0000FF; }

Bản demo trên CodePen

Các biến SCSS rất mạnh và có nhiều thứ có thể được thực hiện với chúng ngoài màu sắc. Hãy thử sử dụng chúng cho các kiểu và họ phông chữ, các điểm dừng khác nhau hoặc thời gian chuyển tiếp. Đi hoang dã

Trong Beyn Technology, chúng tôi thường xử lý các vấn đề UI và UX khá phức tạp và chúng tôi cần giải quyết chúng theo những cách thông minh để hiển thị hàng tấn dữ liệu quý giá cho người dùng. Ngoài ra, chúng tôi đang cố gắng đạt được điểm mà chúng tôi có thể chơi với các chủ đề mà không cần chạm vào mã. Để làm được điều đó, chúng ta nên tìm hiểu sâu hơn một chút về CSS và SCSS (hoặc bất kỳ ngôn ngữ kịch bản tiền xử lý nào khác)

Tất cả chúng tôi đều sẵn lòng sử dụng SCSS và hưởng lợi từ các tính năng của nó. Ngoài ra, chúng tôi không muốn từ bỏ các biến CSS, vì chúng rất mạnh, đặc biệt là khi thay đổi chúng trong thời gian chạy, điều này không thể đạt được bằng cách sử dụng các biến SCSS, SASS hoặc LESS. Bởi vì SCSS, SASS, v.v., chúng là các bộ tiền xử lý CSS, điều đó có nghĩa là tất cả các tính năng cụ thể của chúng sẽ biến mất khi được biên dịch thành CSS

Hãy làm cho quan điểm của chúng ta rõ ràng hơn bằng cách xây dựng một cảnh thực tế

Chúng tôi muốn cung cấp một tính năng trong đó người dùng có thể chỉnh sửa một màu cụ thể theo độ đậm, nhạt hoặc thậm chí là sắc độ, v.v. được sử dụng trên chủ đề. Chúng tôi biết rằng chúng tôi nên sử dụng các biến để làm điều đó và chúng tôi biết rằng chỉ các biến CSS mới có thể thao tác được trong thời gian chạy bằng JavaScript. Ngoài ra, để thay đổi thuộc tính của màu sắc, chúng tôi cần 'hàm' vì chúng tôi phải tính toán mọi thứ với đầu vào của khách hàng

Điều này đưa chúng ta đến một điểm mà chúng ta nên sử dụng các biến CSS và các hàm SCSS. Hãy xem điều gì sẽ xảy ra nếu chúng ta thử điều này

và vấn đề

Lý do chúng tôi nhận được lỗi này là trình biên dịch mong đợi một biến SCSS làm tham số trong hàm cụ thể của SCSS, nhưng nhận được một cú pháp khác và không nhận ra cú pháp đó

Ở đây chúng ta nên hoan nghênh thuật ngữ 'nội suy chuỗi'. Điều này có thể được sử dụng ở bất kỳ đâu trong biểu định kiểu SCSS để nhúng kết quả dưới dạng một đoạn CSS thuần túy và cho phép trình duyệt xử lý nó. Chúng tôi sẽ đánh lừa CSS bằng cách sử dụng phép nội suy chuỗi và coi đầu vào này là một chuỗi đơn giản

Hãy bắt đầu làm điều này, khai báo các biến CSS

Ở đây, chúng tôi tách màu thành các thành phần màu sắc, độ bão hòa và độ sáng của nó vì e. g. , thay đổi giá trị độ sáng là đủ để chúng ta chơi với độ sáng của màu. Sẽ phức tạp hơn nếu làm điều đó với các giá trị thập lục phân hoặc RGB

Và chắc chắn có sự lặp lại, nhưng chúng ta sẽ không giải quyết vấn đề này ngay bây giờ

Chúng tôi sẽ có một chức năng SCSS tùy chỉnh làm sáng màu và chúng tôi muốn chức năng này lấy một biến CSS làm tham số vì sau đó, nó sẽ được thao tác bằng JavaScript. Hãy xem chúng ta sẽ gọi hàm này như thế nào

Để làm cho điều này hoạt động mà không có lỗi biên dịch được đặt ở trên, chúng ta nên bắt đầu chơi với phép nội suy và coi biến CSS này là văn bản thuần túy

Hãy xem xét lần cuối chức năng tùy chỉnh SCSS của chúng tôi

Hàm này thay đổi thành phần độ sáng của màu theo giá trị đầu vào đã cho

Tôi cũng đã thêm một chức năng để kiểm soát sắc độ và điều này sẽ cho phép chúng ta điều chỉnh sắc độ và độ đậm nhạt của cùng một màu

Đây là toàn bộ ý tưởng trong hành động

Hãy tưởng tượng nếu dự án của bạn có một chủ đề đẹp và nó được xây dựng một cách khôn ngoan với nhiều biến màu khác nhau để bạn có thể cho phép khách hàng của mình chơi với nó một cách an toàn hoặc thậm chí nhóm có thể chỉ cần tạo một chủ đề an toàn mới mà không vi phạm bất cứ điều gì

Đây là một cách tiếp cận mở mang tầm mắt đối với tôi và có thể rất hữu ích trong các cơ sở mã được viết bởi SCSS để tăng thêm sức mạnh cho nó thông qua các biến CSS

Chúng ta có thể sử dụng biến trong SCSS không?

Sass có hỗ trợ các biến CSS không?

Bạn có thể tự động thay đổi giá trị biến SCSS không?

Làm cách nào để gán biến CSS cho biến SCSS?