css-variables相关内容

用于计算外部范围内的变量时，CSS 范围内的自定义属性被忽略

我正在尝试通过 var 自定义属性来缩放大小，以使类可以在不耦合的情况下组合.期望的效果是这 3 个列表将具有 3 个不同的比例，但正如 在 CodePen 上展示的 所有 3列表是相同的比例.我正在寻找有关范围和 CSS 自定义属性技术的解释，该技术可以通过可组合的松散耦合代码实现这一目标. :root {--size-1: 计算(1 * var(--scale, 1) * 1rem);- ..
发布时间：2022-01-30 17:43:18 前端开发

是否可以在 CSS3 选择器中使用 CSS 变量?

我正在尝试使用 CSS 变量进行一些实验，但我无法让它工作或找到任何有关它的文档.有谁知道是否可以在 CSS3 选择器中使用 CSS var? 我制作了以下示例来解释我正在尝试做的事情.此示例仅适用于 Chrome. JSFIDDLE http://jsfiddle.net/68Rrn/ CSS :root {-webkit-var-count:5；/* 定义我的变量！* ..
发布时间：2022-01-10 00:09:43 前端开发

CSS 使用来自另一个类的颜色?

是否可以将颜色从一个 CSS 类导入到另一个?或者创建某种全局颜色定义，然后在多个类中使用它，这样如果您想更改颜色就不必在多个地方更新? 例如，假设我有一个 CSS 类，我想将其用于特定元素，但我希望它使用分配给 Bootstrap“danger"类的相同颜色.有没有办法做到这一点?还是我只需要从 Bootstrap CSS 文件中复制颜色值并在我自己的类中使用它? 解决方案 您可能 ..
发布时间：2021-12-24 09:05:18 前端开发

如何在 CSS 中将颜色定义为变量?

我正在处理一个很长的 CSS 文件.我知道客户可能会要求更改配色方案，并且想知道:是否可以将颜色分配给变量，以便我可以更改一个变量以将新颜色应用于所有使用它的元素? 请注意，我无法使用 PHP 来动态更改 CSS 文件. 解决方案 CSS 通过 原生支持这一点CSS 变量. 示例 CSS 文件 :root {--主色:#06c;}#foo {颜色:var(--main-color ..
发布时间：2021-12-13 20:48:40 前端开发

用于计算外部作用域中的变量时忽略 CSS 作用域自定义属性

我正在尝试通过 var 自定义属性以类可以组合而不耦合的方式缩放大小.预期的效果是这 3 个列表将在 3 个不同的范围内，但作为 在 CodePen 上展示 全部 3列表是相同的比例.我正在寻找对作用域的解释和 CSS 自定义属性技术，该技术可以通过可组合的松散耦合代码实现这一点. :root {--size-1: calc(1 * var(--scale, 1) * 1rem);--siz ..
发布时间：2021-12-01 16:35:10 前端开发

如何在浏览器中检查 CSS 变量?

我正在定义我的变量按照规范所以: :root {--我的颜色:#000；} 并像这样访问它们: .my-element {背景: var( --my-colour );} 哪个工作正常. 但是我想知道是否有一种方法可以调试或检查 :root CSS 规则以查看定义了哪些变量，以及它们的值是什么? 根据我的理解，:root 选择器和 html 选择器都针对同一个元素，但是当我使用 ..
发布时间：2021-09-22 20:22:48 前端开发

W3C CSS 验证解析变量上的错误

我正在通过 Atom 上的 W3C CSS 验证包传递我的 .css 文件，它实际上向我为练习而创建的所有变量提供了“解析错误"消息.下面是 :root 伪类的开头(但所有剩余的变量声明都同样有问题) 我已经尝试从头开始重写它们，替换它们或更改值只是为了检查行为，但没有任何改变. :root {--原色:#781820；--secondary-color: #ABABAB;--三级颜色:# ..
发布时间：2021-09-20 20:34:01 前端开发

从内部范围覆盖 :root CSS 变量

在 Stack Overflow 的设计系统中，我们使用 Less 来编译 CSS 颜色值. 我们有全局 Less 变量，例如 @orange-500，它们经常针对悬停状态、构建边框样式、背景颜色等进行修改. 在 Less 中，这被写成 darken(@orange-500, 5%).我正在尝试使用本机 CSS 变量实现类似的功能.切换到 CSS 变量将使我们能够更快地发布依赖主题(堆 ..
发布时间：2021-07-16 21:31:00 前端开发

在styles.scss 的:root 块中声明的CSS 变量无效

在我的 angular 11 应用程序中，我尝试全局使用 css 变量来声明全局颜色. 在我的 styles.scss 中，我有: :root{--主要:#0b68e8；--次要:#ABCFFF；}.test-class{背景:var(--primary);} 当我在我的一个组件中应用该类时，我可以看到 var 没有正确地从声明的变量中获取: 我试图找到任何解决方案，但无法解决.你 ..
发布时间：2021-07-14 21:04:27 前端开发

在 SCSS 中使用 HSLA 中的 CSS 变量

所以我一直在尝试在 HSLA 中使用 CSS 变量.我需要保持相同的颜色，但只是改变不透明度. //内容在这里 SCSS :root {--颜色:332、61%、78%；}div {背景:hsla(var(--color), 0.5);} https://codepen.io/sammiepls/pen/zLpvXY 所以我想我可以将 hsl 颜色保留在那里，并通过使用变量来更改悬 ..
发布时间：2021-07-14 21:02:51 其他开发

如何在 Sass 中强制 CSS 变量为整数?

如果这是一个简单的问题，请原谅我，但我正在 CodePen 上与此作斗争，并且不知道发生了什么. 我有代码: :root {--ile: 10;}@for $i 从 0 到 (var(--ile)) { } 问题是 Codepen 声称 var(--ile) 不是整数(嗯?)，即使它显然是(它没有单位，因为它不是 10.0，所以它不能是浮点数).我错过了什么?我试图查看 CSS 规范和网 ..
发布时间：2021-07-14 20:59:14 前端开发

使用CSS变量反转颜色

我想创建一个本地的反向主题(现代浏览器).使用CSS Vars(CSS自定义属性)设置阴影.一些元素具有更高的对比度，另一些元素则具有较低的对比度.现在，倒置的容器具有黑色背景.里面的所有东西都应该颠倒.深灰色应该是浅灰色.浅灰色应该是深灰色. 我的目标是在不重新分配CSS选择器中的变量的情况下实现这一目标.对于此示例，这很容易，但是实际的代码库很大，并且有很多选择器.因此，我只想更改CSS ..
发布时间：2021-05-14 20:17:24 前端开发

Firefox为什么不显示我的SVG图标，以及如何显示?

上下文 我仅使用HTML，CSS和JS(出于学习目的)创建静态网站.我成功实现了两个主题.为了更改它，我在 button 元素中添加了 SVG 图标.然后，svg根据主题(月亮或太阳)而变化. 问题 尽管一切在Chrome浏览器中都能正常运行，但使用Firefox根本无法显示SVG，但是按钮可以正常工作.我怀疑这来自我使用CSS变量在 hover 上更改SVG的 path 的方式.但是， ..
发布时间：2021-05-08 18:59:53 前端开发

将变量从SASS导出到原始CSS?

考虑一下，我在不同的 .scss 文件中都有一长串SASS变量，如下所示: $ app-color-white:#ffffff;$ app-color-black:#000000; 将这些变量导出为原始CSS变量的最有效方法是什么? :root {--app-color-white:#ffffff;--app-color-black:#000000;} 也许有一种SASS方式，甚至有 ..
发布时间：2021-04-26 20:39:18 前端开发

Angular组件的自定义CSS属性

我有一个Angular组件，它封装了图片轮播.如果使用:host选择器将其自身设置为flexbox，则ngFor会为通过@Input属性传递给它的图片数组中的每张图片重复一个img标签. 我有两个相关的问题. 1)我想允许将图片样式设置为固定的高度或宽度.2)我想在imgs上设置margin-right和margin-bottom，以允许图片间距. 棘手的是，我希望这些设置是在主 ..
发布时间：2021-04-26 20:36:29 前端开发