Tôi có thể sử dụng các biến css trong sass không?

Tôi muốn gửi một biến tới một mixin, biến này yêu cầu một biến SASS - bởi vì nó đang biên dịch mixin trước khi nó biết thuộc tính tùy chỉnh CSS đề cập đến điều gì

Nhưng tôi cũng muốn có một chủ đề tối, dễ dàng hơn nhiều khi sử dụng các thuộc tính tùy chỉnh CSS

có một giải pháp

Bạn kết hợp chúng

$black: #000000;
$white: #ffffff;

:root {
  --text-colour: #{$black};
  --bg-colour: #{$white};
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-colour: #{$white}
    --bg-colour: #{$black};
  }
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Để chuyển đổi biến SASS thành thuộc tính tùy chỉnh CSS, bạn đặt dấu ngoặc nhọn xung quanh nó và một hàm băm ở phía trước. Nếu bạn đã sử dụng mẫu chữ trong JavaScript thì nó cũng giống như vậy, chỉ với # thay vì $ (vì chúng tôi đã có $ trong tên biến). Nó giống như ai đó vừa tìm phím tiếp theo trên bàn phím Hoa Kỳ

Các biến CSS vẫn ở đây. Hỗ trợ trình duyệt đã có trên Chrome vào tháng 3 năm 2016 nhưng dường như chúng vẫn chưa được sử dụng nhiều. Lý do đằng sau điều này có thể là sự thống trị của các ngôn ngữ tiền xử lý CSS như SCSS đã có các biến lâu hơn và mọi người vẫn tuân theo các cách do chúng cung cấp. Bản thân tôi sử dụng cách viết CSS của SCSS và sử dụng linh hoạt cả hai lọ SCSS và CSS, giống như cách tôi sử dụng cả flex và grid

Trong bài đăng trên blog này, chúng tôi sẽ tập trung vào màu sắc

Khi nào sử dụng các biến CSS?

Bất cứ khi nào bạn có thể. Ưu điểm của biến CSS là không cần bàn cãi. Chúng có thể được chuyển đổi và ghi đè trong khi các biến SCSS không thể. Các biến CSS đơn giản hóa việc tạo các trang web dựa trên chủ đề màu sắc như thế này ngay tại đây. cuộn. thiết kế có chế độ tối (có một công tắc bật tắt ở góc trên cùng bên phải trên máy tính để bàn hoặc ở cuối trang web trên thiết bị di động) đã đạt được bằng cách thay thế màu sắc bằng các biến CSS

Tôi thích sử dụng các biến CSS luôn trong nguyên tắc nhưng trong một số trường hợp, chúng không thể được sử dụng theo cách tốt nhất có thể. Những tình huống này là

Khi viết bài này vào tháng 4 năm 2021, trình duyệt hỗ trợ các biến CSS là 95. 06% trên toàn cầu

Tôi đã sử dụng các biến SCSS rất nhiều trong những thứ như thế này trong biến/_colors. scss

$color-brand-grey: #ccc;
$color-grey: $color-brand-grey;
$color-grey-80: darken($color-brand-grey, 20%);

Và trong những thứ như thế này

.button {
  @include $button($color: $color-grey-80);
}

Khi điều đó xảy ra, bạn có thể kết hợp cả hai biến SCSS và CSS trong cùng một môi trường như trong biến/thành phần/_button này. ví dụ scss

// Colors should really be in their own file
// but let's have them here in this example
:root {
  --color-wow-css-color: #f02c93;
}

@mixin my-awesome-button($color: var(--color-wow-css-color)) {
  color: $color;
}

Điều này thực sự sẽ làm việc tốt. Nếu bạn cần, bạn thậm chí có thể xác định các màu như thế này trong các biến/_colors của mình. scss

// CSS Variables for colors
:root {
  --color-east-bay: #545773;
}

// SCSS Variables for colors
$color-buttons: var(--color-east-bay);

Nhưng 👏. luôn luôn có một nhưng. Nếu tôi thay đổi từ biến SCSS thành biến CSS tại đây…

// Colors should really be in their own file
// but let's have them here in this example
:root {
  --color-wow-css-color: #f02c93;
}

.skip-link:focus {
  color: choose-contrast-color(var(--color-wow-css-color));
}

...tác vụ kiểu gulp của tôi tạo ra lỗi. “Đối số

$color-brand-grey: #ccc;
$color-grey: $color-brand-grey;
$color-grey-80: darken($color-brand-grey, 20%);

2 phải là một màu”

Điều tương tự cũng xảy ra với một số hàm SCSS tùy chỉnh dựa trên các biến ở định dạng SCSS với ký tự đô la. ví dụ

.button {
  @include $button($color: $color-grey-80);
}

0 hoặc

.button {
  @include $button($color: $color-grey-80);
}

1 mà tôi sử dụng. Họ sẽ không dịch các biến CSS thành màu sắc

Đối với

.button {
  @include $button($color: $color-grey-80);
}

2, nó phức tạp hơn một chút vì hàm rgba gốc trong CSS chỉ chấp nhận định dạng màu RGB trong khi phiên bản SCSS chấp nhận các định dạng SCSS vars, hex và rgb mà nó tự động xử lý thành định dạng RGB trong CSS xuất ra. Tuy nhiên, khi có một biến CSS tại chỗ, nó sẽ liên kết với màu hex dưới dạng văn bản thuần túy. Để chúng tôi có thể sử dụng các vars CSS, trước tiên chúng tôi cần chuyển đổi hex được cung cấp bởi var thành phiên bản màu RGB. Với mục đích này, tôi có một hàm trợ giúp có tên là

.button {
  @include $button($color: $color-grey-80);
}

3

$color-brand-grey: #ccc;
$color-grey: $color-brand-grey;
$color-grey-80: darken($color-brand-grey, 20%);

0

Sau khi tôi đã nhập trình trợ giúp đó, các biến/_colors. tệp scss cần được định dạng như thế này

$color-brand-grey: #ccc;
$color-grey: $color-brand-grey;
$color-grey-80: darken($color-brand-grey, 20%);

1

Bằng cách này, bạn chỉ cần xác định màu một lần và phần còn lại là tự động. Sau đó chúng ta có thể sử dụng rgba như thế này

Bạn có thể sử dụng các biến CSS với Sass không?

Tôi có thể sử dụng thuộc tính tùy chỉnh CSS trong Sass không?

Tôi nên sử dụng biến CSS hay biến Sass?

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