标签: css-variables

我试图制作一个"多行"精灵CSS动画(由此编写:http://codepen.io/simurai/pen/vmhuJ ),但却发现Firefox不支持background-position-x或-y.

这里缺乏-x/-y详细讨论:https://bugzilla.mozilla.org/show_bug.cgi？id = 550426,以及建议的解决方案(background-position-y在Firefox中不起作用(通过CSS)？)是使用最近在Firefox中引入的CSS变量.

但是,它似乎不@keyframes支持从动画更新CSS变量？

...
background-position: var(--bgX) var(--bgY);
...

/*Here, CSS variables don't work:*/
@keyframes move-y {
  from {
    --bgY: 0px;
  }
  to {
    --bgY: -670px;
  }
}

这是一个JSFiddle(注意:只有Firefox):http://jsfiddle.net/phoj0kq5/
我为动画添加了闪烁的边框,以确保它正在运行,但螃蟹不会用手指抓住..我使用的是CSS变量错了,还是他们根本不支持动画？

编辑

实际上在Chrome中运行的更新小提琴(仍然不在Firefox中):http://jsfiddle.net/phoj0kq5/1/

我正在测试一个 CSS 框架，用于通过微类指定数字。例如，类似的内容<div class="fifty percent wide">可能会翻译成width: 50%. 该实现使用 CSS 变量（自定义属性）。

考虑以下 CSS：

.fifty   { --number: 50; }
.percent { --percent: calc(1% * var(--number)); }
.wide    { width: var(--percent); }

一切都很好，而且效果很好。问题是我想编写一个测试套件，它将验证 的自定义属性的fifty percent值。不幸的是，如果我用来检查 的值，我会看到整个（未解析、未计算的）“calc”字符串。如果我检查 的值，我会得到已经解析的值，例如“512px”。--percent50%getComputedStyle--percentwidth

是否有某种方法可以以编程方式获取和验证自定义 CSS 属性的已解析、计算值？或者强制计算“calc”表达式的 API？

如果这是一个简单的问题，请原谅我，但我正在 CodePen 上解决这个问题，并且不知道发生了什么。

我有代码：

:root {
  --ile: 10;
}
@for $i from 0 to (var(--ile)) { }

问题是 Codepen 声称 var(--ile) 不是整数（嗯？），即使显然它是（它没有单位，因为它不是 10.0，所以它不能是浮点数）。我缺少什么？我尝试查看 CSS 规范和网络上的各种示例，并使用数字作为变量是合法的，那么如果 10 不是整数，如何强制转换为整数？

从下面的笔中可以看出，使用 calc 的 css 变量似乎不尊重变量的级联性质：

:root {
  --font-size-mult: 1;
  --font-size: calc(var(--font-size-mult) * 16px);
}

* {
  font-size: var(--font-size);
}

.large {
  --font-size-mult: 2;
}

预期的行为是文档中任何具有 .large 类的部分的字体大小都是常规 16px 的两倍。从示例中可以看出，如果我重新定义 .large 内部的 font-size 变量，我会得到所需的行为，但这似乎违反直觉，因为 --font-size 的值已经是它需要的值解析为正确的值。

我测试过的所有浏览器似乎都是这种情况，所以它可能是规范的一部分，但它似乎不太适合 CSS 的工作方式。我认为变量值将根据当前元素范围内其他变量的值来计算，而不是根据变量定义的范围来计算。

https://codepen.io/Smilebags/pen/MrRKMY

这是预期的行为吗？应该是这样吗？

我有一个组件，它根据 json 文件中存储的值设置 div 的背景颜色，然后循环显示一堆颜色样本。

   <div class="color-swatch-color"
        [style.background-color]="foo"></div>

它与变量中的十六进制颜色配合得很好：foo="#f00";

但没有颜色显示我使用的颜色变量：foo = 'var(--primary)';

div 显示在 HTML 中，不会引发任何错误，但 div 上根本没有背景颜色。

更新

我应该更清楚。我有一个使用诸如 --primary、-- secondary （如 Bootstrap）之类的变量的主题。我想展示这些颜色的样本。但是，我在 CSS 类中使用变量，以便可以通过 body 标记上的“主题”类更改它们的值。

因此，我尝试将样本设置为变量，以便当用户更改 body 标记上的类时，样本会像我的应用程序的其余部分一样自动更改颜色。

看看这个 stackblitz。如果我直接分配变量，它会分配背景颜色。通过角度变量，它不分配任何颜色。

我这样做是因为如果你打开开发工具，你可以选择我的品牌颜色变量并即时更改它；这类似于切换主题，其中“brandcolor”可以改变访问主题

我想在 Vue 组件中访问项目中 css 根变量的值。例如，通过按按钮更改 10 个变量，包括颜色、边距和字体大小，然后按同一按钮将变量更改为其（默认）原始值，实际上是更改值项目中的 css 根变量。我怎样才能做到这一点 ？事实上，我想通过按一个按钮在黑暗和光明之间切换。

这个想法的灵感来自以下链接的更改。链接内的示例是用纯JavaScript脚本编写的，我想在Next Js Framework上开发的Vue项目中使用它。实现一个包含大约 10 个变量的网站，按下按钮以切换暗/亮模式，这些变量的值必须立即更改。

给我启发的 codepen 链接:)

如何访问和更改 CSS 根变量？

new Vue({
	el: "#theme",
	data: {
    return {
      dark: true,
      
    };
  },
  
  watch: {
    dark() {
    
      let bg = this.dark ? "#1b1b1b" : "#f5f5f5";
      let txtColor = this.dark ? "#999999" : "#333333";
      
      document.documentElement.style.setProperty("--bg", bg);
      document.documentElement.style.setProperty("--txt", txtColor);
      
    }
  }
});

:root{

--bg: white;
--txt: black;

}


body {
  background-color: var(--bg);
  color: var(--txt)
}
article {
  padding: 50px
}
article h2 …

不确定是否有人遇到这个问题（我见过类似的问题，但不完全一样），但在 Mac OSX Safari 浏览器上，当您使用变量作为背景图像的相对图像位置时，会发生以下问题，它不会加载

:root {
  --lb3-widget-icon: url(../../images/logo-icon2.png);
}
.image-area {
  background-image: var(--lb3-widget-icon);
}

以下是存在该问题的项目示例： https://codepen.io/alexbernotas/pen/dypLKvR

正如您所看到的，左上角蓝色区域上方的图像未加载，但在 Firefox 和 Chrome 上加载时没有任何问题，有什么想法吗？

检查：

• 苹果操作系统 11.2.1
• Safari 14.0.3

我知道如果您使用完整的图像路径 URI 那么它会工作，但我需要让它与相对文件路径一起工作

编辑：

一个更简单的例子： https ://codepen.io/alexbernotas/pen/abpbVeG

我想知道定义一个以这样的数字开头的 css 变量是否有效，

:root { --1space: 32px; }

这在 Chrome 上工作得很好，但是该代码没有经过https://jigsaw.w3.org/css-validator/的验证，而且 VSCode 在变量名称下画了一条红线。

如果 css 变量名是 ident 那么在这个图表中以数字开头应该没问题；

https://www.w3.org/TR/css-syntax-3/#ident-token-diagram

是否可以将颜色从一个 CSS 类导入到另一个 CSS 类？或者创建某种全局颜色定义，然后在多个类中使用它，这样如果您想更改颜色，就不必在多个位置进行更新？

例如，假设我有一个 CSS 类，我想将其用于特定元素，但我希望它使用分配给 Bootstrap“危险”类的相同颜色。有什么办法可以做到这一点吗？或者我只需要从 Bootstrap CSS 文件复制颜色值并在我自己的类中使用它？

我已经设置了我在 index.js 中导入的 global.css 文件

--root {
  --main-color: red;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

索引.js

import "./global.css";
import App from "./App.svelte";

const app = new App({
  target: document.body
});

我的 webpack 设置

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.(html|svelte)$/,
        exclude: /node_modules/,
        use: {
          loader: "svelte-loader",
          options: {
            emitCss: true,
            hotReload: …