标签: css-variables

我正在尝试在 CSS/scss 中构建我自己的小型可扩展网格。到目前为止，我发现了这个决定：

:root {
  --page-width: 1170px;
  --gutter: 15px;
  --columns: 12;
}

.wrapper {
  max-width: var(--page-width);
  margin-right: auto;
  margin-left: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.row {
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
}

.col {
  display: block;
  margin-left: var(--gutter);
  margin-right: var(--gutter);
}

然后我尝试使用 scss 来缩短列类描述（同时允许我在整个代码的一个地方更改列数 - 在 CSS Variable 中--columns）像这样

@for $n from 1 through var(--columns) {
  .col-#{$n} {width: calc( #{$n} / var(--columns) - var(--gutter) * 2 ); }
}

但它没有用。有趣的细节是，当我将@for语句从@for $n …

我想创建一个组件并公开某些可能被父元素覆盖的属性。

这是一个例子。假设我正在创建一个按钮，它有自己的颜色，但如果有--button-bg-color定义，则允许更改其背景颜色：

.my-button {
  --bg-color: blue;

  /* lots of other css... */

  /**
    * here I assume that there might be a --button-bg-color defined,
    * but I have a fallback to my own --bg-color variable
    */
  background-color: var(--button-bg-color, var(--bg-color));
}

上面代码的问题在于该--button-bg-color变量在样式的深处被引用。

我希望我能做的是在顶部某处声明我可能想要使用这个变量。这会告诉我该组件希望被覆盖。

也许是这样的？

.my-button {
  --button-bg-color: undefined; /* is there something like undefined? */
  --bg-color: blue;

  /* the rest of the code is the same */
}

我正在使用 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 变量来存储字体，以防用户没有安装指定的字体。

例子：

:root {
     --common-font: Comic Sans MS;
}

.header1 {
     font-family: CoolFont1, var(--common-font);
}

如果我在字体名称中添加对变量的引用，旧浏览器会中断吗？

https://caniuse.com/#feat=css-variables

当我将鼠标悬停在页面上时，我注意到页面上的按钮闪烁（会改变不透明度）。经过一番挖掘，发现每次样式更新时，浏览器都会重新下载该图像。

这发生在 Mac Chrome 74 和 Safari 上。Firefox 看起来不错。

这些按钮使用带有 CSS 变量的 background-image 样式，代码如下所示：

body {
    --src-image: url("some image");
}

.btn {
    background-image: var(--src-image);
}

.btn:hover {
    opacity: 0.7;
}

代码笔：https ://codepen.io/polyamide/pen/qzEVzO

复现步骤：

1. 打开 DevTool 并禁用缓存。
2. 将鼠标悬停在第二张图片上（这个使用 CSS 变量，而第一个没有）。
3. 请参阅网络面板。样式更新时会有新的请求。

避免使用 css 变量解决了问题，但我仍然想了解为什么会发生这种情况，我该如何解决？

我正在尝试使用自定义 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