我正在考虑用$someValueCSS自定义属性（例如）替换SCSS变量（例如var(--someValue)），试图在主题和特定于上下文的覆盖形式上提供更多的灵活性，并使浏览器中的开发工具更可用。最终，我可能想完全转储 SCSS 变量，以简化开发堆栈。

然而，我注意到与 SCSS 变量不同，CSS 自定义属性完全未经检查，并且拼写错误是一个问题。我曾以令人困惑的方式出现代码中断，因为设置 CSS 自定义属性或在表达式中使用它时出现拼写错误 - 毕竟，CSS 对于使用未设置或无效设置的 CSS 属性非常宽松。

由于 CSS 自定义属性目前并不完全是新的，我认为我能够找到一些 webpack 插件或其他解决方案来为 CSS 属性添加基本类型检查，但我似乎找不到任何。理想情况下，我希望要求以某种方式声明所有 CSS 自定义属性，包括其内容的类型（以确保例如变量始终用作无量纲、全量纲值、颜色等） ），但即使只是一个检测拼写错误的工具或技术也能捕获真正的错误。然而，我一直无法找到类似的东西，无论是作为构建工具，还是 SASS 插件。

在使用 CSS 自定义属性时，如何保护自己免受简单的疏忽，例如检测到设置为的属性--someValue: 13px从未使用过，或者相反，引用var(--someValue)似乎没有匹配的分配？

将自定义属性设置为 的值inherit完全符合您对每个其他 CSS 属性的期望：它继承其父级的相同属性值。

普通属性继承：

<style>
  figure {
    border: 1px solid red;
  }
  figure > figcaption {
    border: inherit;
  }
</style>
<figure>this figure has a red border
  <figcaption>this figcaption has the same border
    as its parent because it is inherited</figcaption>
</figure>

自定义属性继承（显式）：

<style>
  figure {
    --foobar: 1px solid green;
  }
  figure > figcaption {
    --foobar: inherit;
    border: var(--foobar);
  }
</style>
<figure>this figure has no border
  <figcaption>this figcaption has a green border
    because it explicitly inherits --foobar</figcaption>
</figure>

自定义属性继承（隐式）： …

TL; DR:如何使用SCSS使CSS变量具有旧版浏览器的回退.

我试图理解这篇文章.在我看来,你必须已经是一个先进的SASS用户才能理解它,我不是.更糟糕的是,这是我在这个主题上发现的唯一一篇文章.

这是我想要实现的目标:

我的scss应该是这样的:

body {
  @include v(background-color, primary)
}

然后处理过的CSS应该是

body{
   background: yellow; /* Yellow being defined above as the primary color */
   background: var(--color-primary);
}

通过玩一下,我已经可以获得CSS变量的值,如下所示:

$colors: (
  primary: yellow,
);

:root {
  @each $name, $color in $colors {
    --color-#{$name}: $color;
  }
}

@mixin background-color($color_) {
  background: var(--color-#{$color_});
}

要使用它:

body{
  @include background-color(primary);
}

这将导致:

body {
    background: var(--color-primary);
    /* But the fallback is missing :(, I tried  things with the …

嗨,那么让我先向您展示如何在SCSS中执行此操作:

$submenu-padding-left: 1.5em;

transform: translateX(calc(-#{$submenu-padding-left} + .5em));

哪个会编译为:

transform: translateX(calc(-1.5em - .5em))

基本上,SCSS允许我将减号-与变量连接起来,以便将其转换为负值.

使用CSS变量可以实现这一点吗？

CSS 变量在 SVG 背景图像中使用时不起作用：

.icon-24 {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-color: silver;
}

.icon-24-stroke {
  --color-test: red;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='var(--color-test)' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1px'> <circle cx='12' cy='12' r='8' /> </svg>");
}

.icon-24-fill {
  --color-test: red;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='var(--color-test)'><circle cx='12' cy='12' r='8' /></svg>");
}

<p>The circle stroke should be red:</p>
<i class="icon-24 icon-24-stroke"></i>
<p>The circle fill should be red:</p>
<i class="icon-24 icon-24-fill"></i>

有没有办法使这项工作？

我喜欢使用css 自定义属性，但我经常发现我希望我能做到这一点。

我希望能够根据 css 自定义属性的值有条件地应用一些样式。这是一些伪代码：

.something {
  border: var(--is-dark-theme) ? 1px solid : none;
}

我知道自定义属性不能像这样工作。但是可能还有其他一些我不知道的方法可以帮助我达到类似的结果？

或者也许有一些规范提案可以在未来实现？

如何在全局 CSS 文件中使用 CSS 变量

只需在 stackblitz 中检查 style.css 文件

https://stackblitz.com/edit/angular-themeing-y3jwrk?file=src/styles.css

我有JS库,我有这个问题:我正在使用等宽字体创建用于计算字符大小的临时元素.现在我正在复制风格,但我需要原始的所有样式,包括css变量.我不想克隆元素,因为里面有我不需要的元素.此外,元素可能具有用户设置的id,不确定当存在两个具有相同id的元素时这将如何表现,因此将每个样式复制到新的临时元素会更好(我认为).

我有基于这些的代码:

• 通过JavaScript访问CSS自定义属性(也称为CSS变量)
• 将javascript计算样式从一个元素设置为另一个元素

我的代码看起来像这样:

function is_valid_style_property(key, value) {
    //checking that the property is not int index ( happens on some browser
    return typeof value === 'string' && value.length && value !== parseInt(value);
}

function copy_computed_style(from, to) {
    var computed_style_object = false;
    computed_style_object = from.currentStyle || document.defaultView.getComputedStyle(from, null);

    if (!computed_style_object) {
        return;
    }
    Object.keys(computed_style_object).forEach(function(key) {
        var value = computed_style_object.getPropertyValue(key);
        if (key.match(/^--/)) {
            console.log({key, value}); // this is never executed
        }
        if (is_valid_style_property(key, value)) {
            to.style.setProperty(key, value);
        }
    });
}

问题是 …

我试图用一个数字设置一个 CSS 变量，然后我想在我的 CSS 中使用它作为百分比，而在其他地方，我需要将它用作某些calc()操作的普通数字。

例子

--mywidth:10;

div{width:var(--mywidth) + %;}  --- should be ---> width:10%

是否可以？

是否可以使用回调来监听 CSS 变量的变化？像这样：

documentElement.addListener('css-var-main-background-color', () => {
  console.log('Value changed');
});