标签: css-variables

我自定义链接。我希望边框颜色取决于color。为此，我使用 CurrentColor。

如何使不透明度为0.5的边框底部？

a {\r\n  text-decoration: none;\r\n  color: blue;\r\n  border-bottom: 1px solid CurrentColor;\r\n}

<a href="/">Some link</a>

\n\n

我有一个解决方案，但我不确定它是最好的。

a {\r\n  text-decoration: none;\r\n  color: blue;\r\n  background: linear-gradient(to bottom, CurrentColor, transparent 50%) 0 100% repeat-x;\r\n  background-size: 10px 1px;\r\n}

<a href="/">Some link</a>

\n\n

此解决方案不起作用\xe2\x80\x99。

a {\r\n  --color: blue;\r\n  \r\n  text-decoration: none;\r\n  color: var(blue);\r\n  border-bottom: 1px solid rgba(var(--color), 0.5);\r\n}

我正在为网站编写用户样式，我使用 css 变量进行用户配置。我正在尝试使用带有变量的内联 svg 来创建一个设置为用户首选强调色的复选标记。但这似乎不起作用。

在提供的代码中，我只是插入了 var 函数，但我也尝试将笔画的颜色设置为 currentColor 并将元素的颜色设置为变量。设置蒙版和背景颜色有效，但我想要一个“纯内联 svg”解决方案。

.checkmark {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12">\
    <path fill="none" stroke="var(--ColAccent)" stroke-width="3" d="M1.99609375 5.7835338l3.70287382 3.7028738L14.1853752 1"/>\
</svg>');
}

复选标记应该是强调色。当我通过简单地放入 var() 来设置它时，它不起作用并且是透明的。有趣的是，当使用 currentColor 方法时，描边是黑色的。

所以我的网站功能的基本方式是有一个“base.html”和“base.css”模板，它们有一个顶栏并分别定义页面颜色、文本颜色等变量，如下所示：

:root {
--text-primary: #b6b6b6;
--text-secondary: #5f5f5f;
--bg-primary: #23232e;
--bg-secondary: #141418;
}

然后，其他 HTML 页面开始并将{% extends "base.html" %}其内容插入到页面正文中。其他每个页面也将导入样式表。例如，一页使用表格来显示不同的选项。我希望该表中的项目具有颜色，var("--bg-primary")但是当我使用一个样式表根目录中定义的变量时，我仍然无法在另一个样式表中使用它，即使扩展后的最后一页将导入两个样式表。有没有办法做到这一点？

我目前正在开发一个使用 DSM invision 进行 UI 设计的 react 项目，基本上，DSM 提供了一个包含样式变量的 css 文件“_style-params”。

--color-primary: #00a2ff;
--color-secondary: #6c757d;
--color-success: #28a745;
--color-danger: #dc3545;

由于这种易于理解和使用，我可以将 css 文件导入到我的主 css 文件中并编写：

background-color:var(--color-primary);

但是，说到字体，我有一些问题：以下来自 _style-params.css：

/* button fonts/default/5-warning font style */
--font-button-fonts-default-5-warning-font-size: 16px;
--font-button-fonts-default-5-warning-line-height: 14px;
--font-button-fonts-default-5-warning-text-align: center;
--font-button-fonts-default-5-warning-color: #f0ad4e;
--font-button-fonts-default-5-warning-letter-spacing: 0.2px;
--font-button-fonts-default-5-warning-font-style: normal;
--font-button-fonts-default-5-warning-font-weight: 400;
--font-button-fonts-default-5-warning-font-family: Roboto;

--font-button-fonts-default-5-warning: {
  font-size: var(--font-button-fonts-default-5-warning-font-size);
  line-height: var(--font-button-fonts-default-5-warning-line-height);
  text-align: var(--font-button-fonts-default-5-warning-text-align);
  color: var(--font-button-fonts-default-5-warning-color);
  letter-spacing: var(--font-button-fonts-default-5-warning-letter-spacing);
  font-style: var(--font-button-fonts-default-5-warning-font-style);
  font-weight: var(--font-button-fonts-default-5-warning-font-weight);
  font-family: var(--font-button-fonts-default-5-warning-font-family);
};

我可以只使用以下变量（这是一个对象）

var(--font-button-fonts-default-5-warning)

我不知道使用这个变量的属性，我尝试了以下操作：

font:var(--font-button-fonts-default-5-warning)

这不起作用（显然）。那么，我可以使用这个对象 CSS 变量吗？或者我必须使用单个变量？

我想给 CSS 变量赋予未设置的值，这样我就可以将它用于outline: unset. （我知道其中的“未设置”--unset-it: unset是指变量本身。）

能做到吗？我在这里做了一些测试：

const theDump = document.getElementById("dump");
const root = document.documentElement;
let checked = false;

document.getElementsByName("unset-it").forEach((elt) => {
  function displayIt(elt) {
    root.style.setProperty("--unset-it", elt.value);
    const propVal = getComputedStyle(root).getPropertyValue("--unset-it");
    theDump.textContent = `--unset-it: ${propVal};`;
  }
  if (!checked) {
    checked = true;
    elt.checked = true;
    elt.focus();
    displayIt(elt);
  }
  elt.addEventListener("click", evt => {
    const elt = evt.target;
    displayIt(elt);
  });
});

* {
  box-sizing: border-box;
}

#ex {
  background: yellow;
  padding: 0.5rem;
  margin: 1rem 0;
}

input[type=radio] { …

我正在努力理解以下 CSS 变量，我相信代码本身就说明了一切，否则请告诉我。

:root {
    --color: red;
    --hover-color: var(--color);
}

div {
    --color: green;

    background: var(--color);
}

div:hover {
    background: var(--hover-color);
}

<div>
Why am I red on hover? Shouldn't I be green? When inspecting this element on hover, chrome shows the green color!?
</div>

让我感到绝对困惑的是，当检查 Chrome Devtools 中的元素时，它显示悬停颜色为绿色？

有没有办法只使用普通 CSS 来修改媒体查询中先前声明的 CSS 变量？我所追求的看起来像这样（这当然不起作用，因为变量最终都会被计算）：

#container {
  --elem-size: 20px;
}

@media only screen and (min-width: 800px) {
  #container {
    --elem-size: calc(var(--elem-size) * 2);
  }
}

我知道可以声明一个“基本变量”（例如 --base-elem-size），然后使用它为不同的视口生成新的变量值。然而，我正在使用大量的 CSS 变量，这使得从它们中创建重复的基本集是不可取的。理想的解决方案将能够“修改”先前声明的值。

我试图在 javascript 中实现的内容如下所示：

myVar = newVar || myVar;

在 css 中，我正在执行以下操作：

--my-var: var(--new-var, var(--my-var))

似乎它不起作用。如果新值未定义，是否有可能在回退中使用旧值？

我想创建一个本地倒置主题（现代浏览器）。使用 CSS Vars（CSS 自定义属性）设置颜色阴影。有些元素对比度较高，有些元素对比度较低。现在倒置的容器具有黑色背景。里面的一切，都应该颠倒过来。深灰色应该是浅灰色。浅灰色应该是深灰色。

我的目标是在不重新分配 CSS 选择器中的变量的情况下实现这一点。对于这个例子，这很容易，但实际的代码库很大，而且有很多选择器。因此，我只想更改 CSS Vars。此外，我希望保持原始 CSS Vars 可编辑。

最终目标模型

显然，简单地重新分配变量（亮 = 暗，暗 = 亮）是行不通的。我试图将这些值转置为一个新的占位符 var，但这也不起作用。也许我做错了？有干净的方法吗？我不这么认为。

我知道使用 SASS 的解决方法，或使用混合模式的黑客。

游乐场：https :
//codepen.io/esher/pen/WzRJBy

示例代码：

<p class="high-contrast">high contrast</p>
<p class="low-contrast">low contrast</p>

<div class="inverted">
  <p class="high-contrast">high contrast</p>
  <p class="low-contrast">low contrast</p>
</div>

<style>
  :root {
    --high-contrast: #222;
    --low-contrast:  #aaa;
  }

  .high-contrast { color: var(--high-contrast) }
  .low-contrast  { color: var(--low-contrast)  }

  .inverted {
    background-color: black;

    /* Switching vars does not work 
    --high-contrast: var(--low-contrast);
    --low-contrast:  var(--high-contrast);
    */

    /* Transposing …

我正在尝试使用css变量更改整个网页的选择颜色：

html {
  --my-var: red;
}

 ::selection {
  background-color: var(--my-var);
}

<p>a b c</p>
<div>
  <p>x y z</p>
</div>

我正确地看到了选择样式。但是，如果var引用未定义的变量，则根本没有选择颜色：

html {
  --my-var: red;
}

::selection {
  background-color: var(--not-my-var);
}

如何为使用css变量值的整个页面定义选择颜色（如果存在的话），或者退回到默认的浏览器选择颜色？我试过var(--not-my-var, unset)，var(--not-my-var, inherit)和var(--not-my-var, initial)，但他们似乎并没有做的工作