标签: css-variables

我想问一下如何通过sass函数自动生成css变量

例如：我希望这个变量自动生成

:root{--sample1:red;}

SASS函数：

@function brand($key,$val) {
 //this not works  
 :root{
    --#{$key}:$val;
  }
@return val(--#{$val});}

利用品牌功能

   header{
       background-color:brand("sample1",red)
   }

我正在尝试为我的一个项目进行主题化，并且我正在使用 css 变量。我正在定义 css 变量如下

.theme-1 {
    --var-1: #ffe;
    --var-2: #000;
}

.theme-2 {
    --var-1: #fff;
    --var-2: #000;
}

在 html 中，我应用了如下主题

<div [ngClass]="'theme-1'">
<!--content>

<-->
</div>

除了这里提到的 IE -11 之前不支持 css-variables 之外，一切都很好。

题

有什么方法可以用 scss 变量实现这一点，以便我可以定义全局变量并根据 class 更改值。

注意：我在我的项目中使用了 angular，因此我也必须担心视图封装。如果答案可以通过默认封装来实现，那就太好了。

提前致谢。

我希望能够通过 JS 更新 CSS 变量，但是当我更新变量时，CSS 伪元素被销毁（即消失）。

这是 SCSS 代码：

:root {
  --test-thing: "";
}

.folder-1-open span::after {
    width: 90%;
    height: 85%;
    bottom: 0;
    left: 5%;
    background-color: #fff;
    z-index: 3;
    content: var(--test-thing);
}

我试图这样操纵变量：

const root = document.documentElement
root.style.setProperty('--test-thing', "Hello World")

上面的 CSS 在它所应用的元素（一个标签）上工作得非常好，基本上只是一个白色方块，但是一旦我尝试更新 CSS 变量--test-thing以通过contentprop添加一个字符串，整个事情就会消失。

用伪元素或类不能做到这一点吗？

通过研究 SO 上的相关帖子，我的理解是使用 CSS 变量是可能的。

对于上下文，我正在处理这个纯 CSS 交互式文件夹的示例（当它打开时，我想动态地更新内容）。

我正在尝试在 SCSS 文件中创建这个变量。但这不起作用。我哪里做错了？

--orange: #fda63c;
--orange-light: rgba(var(--orange), 0.15);

这也不起作用：

--orange: #fda63c;
background-color: rgba(var(--orange), 0.15);

假设我是某个 Web 组件的库作者；我想允许用户设置我的组件的背景颜色。我通过设置允许这样做--background-color。例如，用户可以编码：

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

现在在我的组件中，我想要获取用户的 值--background-color，或者使用默认颜色：

.some-component {
  display: contents;
  --background-color: var(--background-color, red);
}

然而上面的代码不起作用。我不介意，有解决方法；但我想知道为什么它不起作用，如果有人有答案的话。

在下面的代码中，预期是绿色，但该行--background-color: var(--background-color, red);似乎以某种方式“破坏”了 CSS。

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

.some-component {
  display: contents;
  --background-color: var(--background-color, red);
}

这些天我正在使用 CSS var，所以有一件事引起了我的注意，我想知道是否为 CSS var() 函数设置了后备，这个后备在不完全支持 CSS var 的旧浏览器中将如何工作。它是否会被应用或被视为未知的 CSS 功能？

长话短说，现在我为这样的属性编写了两行 CSS：

:root{
   --box-height: 350px;
}

.box{
   height: 350px; // FALLBACK for older browsers.
   height: var(--box-height);
}

我的目的是为旧浏览器提供后备，但如果我这样写就可以了：

:root{
   --box-height: 350px;
}

.box{
   height: var(--box-height, 350px); // Does it work in older browsers really?
}

它能在旧浏览器中运行吗？没有关于我正在谈论的内容的透明文档，您的想法是什么？

我想要做的是每当我删除边框颜色中的变量时--mainColor，它:root都会变为黑色，文本变为红色，但它将与颜色的回退值相同。为什么会发生这种情况？

div {
  width: 500px;
  margin: 10px;
  border-color: var(--mainColor, black);
  color: var(--mainColor, red);
  padding: var(--mainPadding, 10px);
  border: solid;
}

<div>Element</div>
<div>Element</div>
<div>Element</div>

我有一个 CSS 变量--size，它是用 javascript 设置的。它的值将为 0 或任何整数。

我希望使用该calc函数创建一个新的 CSS 变量。我希望这个新变量的值为 0 或 1。

• 如果--size= 0 那么新变量 = 0
• 如果--size> 0 那么新变量 = 1

我可以使用下面的代码来实现这一点：

--new: calc(var(--size)/(var--size))

但是当--size= 时0，这不起作用。

有没有办法可以根据变量的值调整我的计算以达到 0 或 1？

我正在尝试使用 Playwright 来测试 Ionic React 应用程序。

Ionic 广泛使用 CSS 变量。

我的应用程序允许用户更改其中一些颜色，因此我想验证颜色更改是否正常工作。

我正在尝试找到一种方法来测试 CSS 变量的值。

Ionic CSS 看起来像这样：

ion-header ion-toolbar {
  --background: var(--ion-color-secondary);
}

--background我如何才能获得Playwright的价值？

我知道我可以使用框架(http://lesscss.org)来完成这个,但我想知道纯CSS是否会随时支持这个？