SASS

Question

我有两个单独的 SASS 文件，在 ReactJS 存储库 上，例如 _main.sass 和 _partials.sass。它们在名为 index.css.

的单独文件中使用 @use 合并

作为依赖项的 SASS 包只是 sass 通过 npm。

_main.sass 及其所有变量都可以通过 _partials.sass 访问，感谢 @use "./main" as *.

我在 _main.sass 上有以下代码，它检测 OS 对黑暗模式的偏好：

@media (prefers-color-scheme: light)
    body
        background-color: $white
        color: $black

@media (prefers-color-scheme: dark)
    body
        background-color: $dark
        color: $light

所有这些颜色变量都已定义并且运行良好。

但问题是我需要在 background-color 上使用 complement() 函数，background-color 在 _partials.sass.

中

在我看来，主要问题是当我在媒体查询的两端分配一个变量例如 $accent 时，该变量不会被远程文件。我无法以这种方式全神贯注，因为我只是编码的初学者 SASS.

不幸的是，我需要简单的 CSS @media 查询实现来自动检测首选项。但是任何建议都将受到赞赏，以防无法保持这样并实现我想要的。

谢谢！

Answer 1

我自己找到了解决方案。

所以，我试图制作一个 light/dark 主题兼容的 SASS 实现。

complement 函数的作用是在 RGB 色调上旋转 180deg 输入中的颜色。我需要它来为每种颜色获得相应的类似倒置的颜色，以获得更好的暗模式对比度。 invert 和 complement 的区别列在 .

但是，我意识到我不需要那个。这是我使用 SASS.

实现主题的代码

// rainbow
$blue: #00a4ef
$yellow: #f4b400
$red: #db4437
$green: #61b500
$purple: #6e14ef
$pink: #ff0090
$carmine: #c6004b

// monochroma 
$white: #fff
$light: #f5f5f5
$lgray: #c2c2c2
$dgray: #6e6e6e
$ldark: #363636
$dark: #232323
$black: #000

$themes: (light: (logo: url("../static/logo-light.svg"), bg: $white, card-bg: $light, text: $black, link: $red, hover: $pink, active: $carmine, border: $lgray, button: $yellow), dark: (logo: url("../static/logo-dark.svg"), bg: $dark, card-bg: $ldark, text: $light, link: $red, hover: $pink, active: $carmine, border: $dgray, button: $purple))

@mixin themeProperty($theme, $property, $color, $additionalProperties)
@if $additionalProperties
    #{$property}: unquote(map-get($theme, $color) + " " + $additionalProperties)
@else 
    #{$property}: unquote(map-get($theme, $color))

@mixin theme($property, $color, $additionalProperties: "")
    $light: map-get($themes, light)
    $dark: map-get($themes, dark)

    @media (prefers-color-scheme: light)
        @include themeProperty($light, $property, $color, $additionalProperties)

    @media (prefers-color-scheme: dark)
        @include themeProperty($dark, $property, $color, $additionalProperties)

有一个名为“主题”的颜色映射表，其中列出了不同用例的浅色和深色主题的每种颜色。

此外，由于 @media 查询。

例如，如果您想使用主题映射上的 button 预设为 background-color 着色，则用法如下：

@include theme("background-color", button)

SASS - 对来自另一个范围的变量的补函数

SASS - Complement function on a variable from another scope

background-color

scss-mixins