标签: css-variables

是否可以将颜色从一个 CSS 类导入到另一个 CSS 类？或者创建某种全局颜色定义，然后在多个类中使用它，这样如果您想更改颜色，就不必在多个位置进行更新？

例如，假设我有一个 CSS 类，我想将其用于特定元素，但我希望它使用分配给 Bootstrap“危险”类的相同颜色。有什么办法可以做到这一点吗？或者我只需要从 Bootstrap CSS 文件复制颜色值并在我自己的类中使用它？

我正在使用 React、Redux、Ant-Design、LESS 和许多其他模块创建一个应用程序。我必须从数据库中获取原色并将其分配给 CSS 变量 (--primary-color)。我将颜色变暗并将其分配给另一个 CSS 变量 (--primary-color-darken)。我使用CSS变量而不是LESS变量，因为LESS变量在编译后被硬编码并且无法更改。我成功地用我的 CSS 变量覆盖了 AntD css 类，但是对于悬停类它不起作用。浏览器似乎正确理解了样式，但计算出了错误的样式。

//LESS code
//Default assigned CSS variables
:root {
  --primary-color: #EB3052;
  --primary-color-darken: #D62D4C;
  --primary-hover-color: var(--primary-color-darken);
}

//Default value for Ant-Design
@primary-color: #EB3052;
@primary-hover-color: #D62D4C;

//Overwrite the Ant-Design class
.ant-btn.ant-btn-primary,
.ant-btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  &:hover {
    background-color: var(--primary-hover-color) !important;
    border-color: var(--primary-hover-color) !important;
  }
}

我重新分配与包装所有应用程序内容的包装组件内联的变量。

[other wrapper]
<div class="CssVariableApplicator" style="--primary-color:#FFFF22;--primary-color-darken:#e6e61f;" data-reactroot="">
  [content]
</div>

查看打印屏幕的行为：

1. 正确设置原色样式：https ://i.stack.imgur.com/RV057.png

2. 正确计算原色： https://i.stack.imgur.com/h7967.png

3. 样式悬停原色正确]： https ://i.stack.imgur.com/tSWIN.png

4. 错误计算悬停原色：https ://i.stack.imgur.com/Ed4e9.png

我正在尝试使用自定义 CSS 属性更改dialog元素的背景颜色，backdrop但它不会。这是 Chrome 中的错误还是有原因？

document.querySelector('dialog').showModal();

:root {
  --color-backdrop: red;
}

dialog::backdrop {
  background: var(--color-backdrop);
}

<dialog><p>This is a dialog. My backdrop should be red.</p></dialog>

在我的 angular 项目中，我在这样的顶级styles.scss文件中定义了一些 css 变量。我在很多地方使用这些变量来保持整个主题的一致性。

:root {
  --theme-color-1: #f7f7f7;
  --theme-color-2: #ec4d3b;
  --theme-color-3: #ffc107;
  --theme-color-4: #686250;

  --font-weight: 300
}

如何从app.component.ts动态更新这些变量的值？在 angular 中做到这一点的干净方法是什么？

考虑以下场景：

document.body.style.setProperty("--text", "world")

body::before{
  --text: "Hello";
  content: var(--text, "...");
}

body::after{
  content: var(--text, "...");
}

CSS 能够通过带有引号的自定义属性的值来设置变量的类型，但是当使用 javascript 执行相同操作时，这是（检查的）节点（在 Chrome 中）的结果，该节点不带引号，这使得不可能用作伪元素的值： --textsetPropertycontent