标签: css-variables

例子：

:root {
    --PrimaryThemeColor: #3acfb6; /* with or without quotes */
}

.ColorSwatch:after {
  content: var(--PrimaryThemeColor);
}

当它被渲染时，计算出的 CSS 就是那个值。

content: var(--PrimaryThemeColor);

即使我使用的后处理器将计算值作为后备注入，值本身也不是字符串，因此对于content.

.ColorSwatch:after {
    content: #3acfb6;
    content: var(--PrimaryThemeColor);
}

我希望能够通过CSS自定义属性使用LESS的darken函数。我有这样的想法：

:root {
  --color-primary: green;
}

div {
  background-color: darken(var(--color-primary), 50%);
}

但这给我一个错误。还有另一种方法吗？

:root Selector在某些浏览器中不起作用.

码:

:root {
    --blue: #4d6fd3;
    --yellow: #d8c812;
}
h1{
    color: var(--blue);
}
h2{
    color: var(--yellow);
}

<h1>This is a heading with blue color</h1>
<h2>This is a heading with yellow color</h2>

这些导入的CSS不适用于Safari 5.1.7和IE11.

我试图使用基于动态值的自定义属性,例如attr().

例如,在下面的代码中,我尝试根据当前元素的id属性访问两个自定义属性.

:root{
  --app-foo: 'Hello';
  --app-bar: 'World';
  }
div::after{
/* expected :
            'Hello' for #foo
            'World' for #bar    */
  content:  var('--app-'attr(id));
  }

<div id="foo"></div>
<div id="bar"></div>

但它显然失败了.

有没有办法实现这个目标？

我正在尝试在我的Angular应用程序中使用css varible,在子组件中,它只是不起作用.在浏览器的Elements工具(我使用Chrome最新版本)中,var()不执行任何操作.expamle:

css文件:

:root {
  --width: 43.75%;
}

#content {
  display: grid;
  grid-template-columns: repeat(2, var(--width));
  grid-auto-rows: 90%;
  grid-gap: 3px;
  align-content: center;
  justify-content: center;
  border: 2px solid black;
  width: 400px;
  height: 250px;
  margin: 0 auto;
}

这就是它在浏览器中的显示方式:

CSS变量是否可以与Angulat一起使用？谢谢

在我在网上阅读的所有资料中,似乎CSS自定义属性和CSS变量是相同的.但是,在Mozilla Developer Network文档的"CSS变量的继承"部分的示例结尾处,有一个令人困惑的声明:

请记住,这些是自定义属性,而不是实际的CSS变量.该值在需要时计算,不存储以用于其他规则.例如,您不能为元素设置属性,并期望在兄弟的后代规则中检索它.该属性仅为匹配选择器及其后代设置,就像任何普通的CSS一样.

这让我觉得这两个概念不是同义词.

自定义属性和变量之间有什么区别？

来自CSS工作组的帖子:

自定义属性不仅仅用于变量[...]

与许多人的想法相矛盾(见本文),这篇文章不仅证实了变量和自定义属性不是同一个东西,而且自定义属性可以用于除变量之外的其他东西.

我的问题是关于最后一部分.有没有人遇到过一些CSS代码,其中自定义属性用于变量之外的其他东西？

我在根中定义了一种颜色：

:root {
--purple: hsl(266, 35%, 70%);
}

我正在尝试在SASS函数中使用它来提高透明度：

.purple {
  background: transparentize(#{"var(--primary-color)"}, 0.7)
}

有谁知道使它工作的方法？还是只是不可能？

我一直在尝试一些事情，但没有找到完全适合我想要做的事情。

以下代码段是我想要实现的目标……

ul {
  --liWidth: 10px;
}

ul li {
  margin-left: calc(var(--liWidth) * var(--n));
  font-size: calc(20px - 1px * var(--n));
}

<ul>
  <li style="--n: 1;">LI 1</li>
  <li style="--n: 2;">LI 2</li>
  <li style="--n: 3;">LI 3</li>
  <li style="--n: 4;">LI 4</li>
  <li style="--n: 5;">LI 5</li>
  <li style="--n: 6;">LI 6</li>
  <li style="--n: 7;">LI 7</li>
  <li style="--n: 8;">LI 8</li>
</ul>

…但是不用我的nCSS-var。
为什么？如果使用一百li秒，我不想输入。

有什么margin-left: calc(var(--liWidth) * nth-of-type());可能的吗？
如果不是，最简单的方法是不使用JavaScript？（我已经知道如何使用它）

提前致谢。

我正在尝试为框模型属性设置CSS变量。我要支持为所有方面以及各个方面设置值。我想拥有默认值，但是无论哪种方式都可以覆盖。我尝试使用后备值，但收效甚微。

就像是：

:root {
  --border-width-top: 0;
  --border-width-right: 0;
  --border-width-bottom: 0;
  --border-width-left: 0;
  --border-width: 0;
}
div {
  border-color: red;
  border-style: solid;
  border-width: var(--border-width, var(--border-width-top) var(--border-width-right) var(--border-width-bottom) var(--border-width-left));
}


div {
  --border-width-top: 10px;
}

如果border-width具有默认值，则它将无法正常工作，那么它将始终优先于后备值。不确定目前有没有办法做到这一点，但是我觉得已经很接近找到解决方案了。

这是我正在玩的一个堆叠闪电战： stackblitz