标签: css-variables
可以用css表示递归变量吗？
对于html:
<body>
<div>
<div>
<div>
...
</div>
</div>
</div>
</body>
有没有办法创建一个使用其父值的递归变量:
body > div {
--x: 1;
}
div {
--x: calc(var(--x) + 1);
}
以上内容无效,因为css变量不能具有依赖循环.另一个无效的例子
body > div {
--is-even: 0;
--is-odd: 1;
}
div {
--is-even: var(--is-odd);
--is-odd: var(--is-even);
}
是否有任何间接方式在css中表达这样的递归变量？
推荐指数
解决办法
查看次数
用于在外部作用域中计算var时忽略CSS作用域自定义属性
我试图通过var自定义属性来缩放大小,这种方式可以在没有耦合的情况下构成类.期望的效果是3个列表将是3个不同的比例,但是在codepen上演示,所有3个列表都是相同的比例.我正在寻找范围的解释和CSS自定义属性技术,可以使用可组合的松散耦合代码实现这一点.
:root {
--size-1: calc(1 * var(--scale, 1) * 1rem);
--size-2: calc(2 * var(--scale, 1) * 1rem);
--size-3: calc(3 * var(--scale, 1) * 1rem);
}
.size-1 { font-size: var(--size-1) }
.size-2 { font-size: var(--size-2) }
.size-3 { font-size: var(--size-3) }
.scale-1x { --scale: 1 }
.scale-2x { --scale: 2 }
.scale-3x { --scale: 3 }
html {
font: 1em sans-serif;
background: papayawhip;
}
ol {
float: left;
list-style: none;
margin: 1rem;
}<ol class="scale-1x">
<li class="size-1">size …推荐指数
解决办法
查看次数
如何调试CSS calc（）值？
我有相对复杂的公式，例如 transform: scale(var(--image-scale)) translateY(calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y)))
如何调试计算值？此外，有没有一种方法可以验证/突出显示公式错误？
我试图这样输出到伪元素，但没有运气
position: fixed;
display: block;
left:0;
right: 0;
background: yellow;
padding: 5px;
z-index: 100;
content: calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y));
我发现的唯一方法是将计算的一部分放到未使用的数值属性background-position-x上，例如在下面的gif上，这样它将在计算选项卡上显示计算值-有用但不是很方便（background-position-x在页面滚动时注意更改）：
position: fixed;
display: block;
left:0;
right: 0;
background: yellow;
padding: 5px;
z-index: 100;
content: calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y));
var sc = ScrollOut({
cssProps: true
})
const results …推荐指数
解决办法
查看次数
我可以将一个 CSS 变量分配给另一个吗？
我可以将一个全局定义的 CSS 变量分配给另一个本地定义的变量吗？
例如，该变量--dark已被全局定义为black。
然后，我希望能够做到：
:root {
--background-color: --dark
}
.light {
--background-color: white
}
div {
background-color: --background-color
}
所以默认情况下，我的div背景是黑色的。当类light被添加到它时，它会有一个白色的背景。
我在--dark这里需要“默认”变量，因为它是一个主题变量。
推荐指数
解决办法
查看次数
CSS 网格：带有 span、calc() 和 CSS 变量的网格列在 WebKit 浏览器中不起作用
我使用一个简单的网格，其中的列数可以通过 CSS 变量配置/覆盖。
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns, 1), 1fr);
}
// Mixin for tablet media query
@include tablet {
.grid {
--grid-columns: 2;
}
}
// Mixin for tablet media query
@include desktop {
.grid {
--grid-columns: 4;
}
}
上面是一个简化的例子。
我还有一个可以在“单元格”上使用的类，以注意它是全宽还是两个单元格宽（半跨度）。
@include desktop {
.span {
&-full {
grid-column: 1 / -1;
}
&-half {
grid-column: span calc(var(--grid-columns) / 2);
// or grid-column: auto / span calc(var(--grid-columns) / 2);
}
}
}
我使用 .span-half 创建一个单元格，该单元格跨越由 --grid-columns 变量设置的列大小的一半。 …
推荐指数
解决办法
查看次数
CSS 自定义属性放置：root 与 body/html 标签
:root在 a而不是body或标签中定义全局 CSS 自定义属性有什么意义html。这是否会导致不同的效果或性能问题？
推荐指数
解决办法
查看次数
使用带有rgba的CSS变量来实现渐变透明度
在指定具有透明度的渐变颜色时,有没有办法使用CSS变量,例如
:root {
--accent-color: #dfd0a5;
}
h1{
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(red(var(--accent-color)), green(var(--accent-color)), blue(var(--accent-color)), 1));
}
推荐指数
解决办法
查看次数
如何获取未定义 CSS 变量的警告
第一次尝试使用 CSS 变量。在 React ( create-react-app) 应用程序中执行此操作，并且效果很好。唯一的问题是，如果我输错了变量名或者只是忘记定义它，则不会出现警告。
例如，有没有办法配置 stylelint 或 scss 来在我使用尚未设置的 CSS 变量时发出警告？或者 FireFox 中的设置/扩展？某物？
推荐指数
解决办法
查看次数
有没有办法类型检查 CSS 自定义属性（又名 CSS 变量）？
我正在考虑用$someValueCSS自定义属性（例如）替换SCSS变量（例如var(--someValue)），试图在主题和特定于上下文的覆盖形式上提供更多的灵活性，并使浏览器中的开发工具更可用。最终，我可能想完全转储 SCSS 变量，以简化开发堆栈。
然而，我注意到与 SCSS 变量不同，CSS 自定义属性完全未经检查，并且拼写错误是一个问题。我曾以令人困惑的方式出现代码中断，因为设置 CSS 自定义属性或在表达式中使用它时出现拼写错误 - 毕竟，CSS 对于使用未设置或无效设置的 CSS 属性非常宽松。
由于 CSS 自定义属性目前并不完全是新的，我认为我能够找到一些 webpack 插件或其他解决方案来为 CSS 属性添加基本类型检查，但我似乎找不到任何。理想情况下，我希望要求以某种方式声明所有 CSS 自定义属性，包括其内容的类型（以确保例如变量始终用作无量纲、全量纲值、颜色等） ），但即使只是一个检测拼写错误的工具或技术也能捕获真正的错误。然而，我一直无法找到类似的东西，无论是作为构建工具，还是 SASS 插件。
在使用 CSS 自定义属性时，如何保护自己免受简单的疏忽，例如检测到设置为的属性--someValue: 13px从未使用过，或者相反，引用var(--someValue)似乎没有匹配的分配？
推荐指数
解决办法
查看次数
CSS 自定义属性对伪元素不可用吗？
在我的页面顶部，我有一堆 CSS 自定义属性，它们适用于我的所有样式表，但是，当我尝试通过::before/::after伪元素访问它们时，Chrome 指出该变量未定义。
举个例子：
<head>
...
<style>
:root {
--my-variable: #ff0000;
}
</style>
</head>
在我的样式表中：
.box {
background-color: var(--my-variable); // Works fine
}
.box::after {
background-color: var(--my-variable); // --my-variable is not defined
}
只是想知道我是否错过了什么？
我也刚刚注意到它在 Firefox 上运行良好，所以也许这是一个错误？
更新：看来CSS属性不是在伪元素中继承的，所以需要根据这个答案直接设置
工作示例：
:root, *::before, *::after {
--my-property: xyz;
}
推荐指数
解决办法
查看次数