标签: css-variables

在 JavaScript 中，您可以使用 .css 获取 CSS 变量的值getPropertyValue(property)。此函数可用于检索:root块中声明的变量。

:root {
    --example-var: 50px;
}

但是，如果此变量表达式包含类似 的函数calc，则该getPropertyValue调用将表达式作为文本返回而不是计算它，即使使用getComputedStyle.

:root {
    --example-var: calc(100px - 5px);
}

如何获取使用 CSS 函数的 CSS 变量的计算值calc？

请参阅下面的示例：

:root {
    --example-var: 50px;
}

:root {
    --example-var: calc(100px - 5px);
}

let div = document.getElementById('example');
console.log(window.getComputedStyle(div).getPropertyValue('--example-var'))

在Stack Overflow的设计系统中，我们使用Less来编译CSS颜色值。

我们有类似@orange-500这样的全局Less变量，这些变量经常针对悬停状态，建筑边框样式，背景颜色等进行修改。

在Less中，它写为darken(@orange-500, 5%)。我正在尝试使用本机CSS变量实现类似的目的。切换到CSS变量将使我们能够更快地发布依赖主题的功能（堆栈交换网络，暗模式等），使用更少的CSS行，同时在媒体查询上启用变量交换（高对比度，暗模式等） ）。

hsl当变量的作用域为CSS类时，此示例将在工作中覆盖颜色的明度值：

.card {
  --orange: hsl(255, 72%, var(--lightness, 68%));
  background: var(--orange);
}
.card:hover {
  --lightness: 45%;
}

<div class="card">
  Hello world
</div>

但是，我们需要在一个可交换的位置上全局指定颜色变量，以支持全局主题设置，但这并不能按预期工作：

:root {
  --orange: hsl(255, 72%, var(--lightness, 68%));
}
.card {
  background: var(--orange);
}
.card:hover {
  --lightness: 45%;
}

<div class="card">
  Hello world
</div>

我试图从切换:root到html或body没有任何的运气。有什么解决方法吗？

我的 Web 组件使用 CSS 变量。

这些变量需要默认值。

它们在许多文件中使用，所以我想提供一次默认值，并且只提供一次。

第一次尝试使文本变黑。为什么？

一次提供默认值的正确方法是什么？

.a {
  --my-variable: red;
}

.b {
  --my-variable: var(--my-variable, blue);
}

<div class="a">
  <div class="b">
    <span style="color: var(--my-variable);">text</span>
  </div>
</div>

我正在尝试使用CSS变量.我在网上寻找教程,到目前为止所有这些都有效.

这是我的CSS:

@variables {
 defaultColor: #8E5050;
 defaultBackGround: #E1DBC3;
}
body {
 background: var(defaultBackGround);
}
a {
 color: var(defaultColor);
}

我也尝试过:

body {
 background: @defaultBackGround;
}
a {
 color: @defaultColor;
}

它们都不起作用,我做错了什么？谢谢

我之前曾为旧版Chrome 问过一个非常类似的问题.但是,我再一次很难让CSS变量工作,这次是在Windows 7上的Chrome 34(版本34.0.1847.131 m)中.(没有尝试过其他操作系统.)

我看到语法已经改变了(对于旧语法,请参阅上面链接的问题),新的语法是CSS Variables规范中的当前语法.:

:root {
  --main-color: #06c;
  --accent-color: #006;
}

/* The rest of the CSS file */
h1#foo {
  color: var(--main-color);
}

值得注意的是,我确实启用了启用实验性Web平台功能标志.但是,如果你看一下这个小提琴,我既不能在Chrome 34中使用旧语法,也不能使用新语法.

谷歌搜索没有发现任何已知的Chrome错误.我很好奇是否有新的东西需要做才能让它运转起来？我做错什么了吗？有没有人遇到过这个？

我有一个项目有一组css文件(每个反应组件一个).我正在使用webpack中的css-loader(带模块)以及postcss-cssnext.

理想情况下,我想要一个单一的,variables.css所以我可以跨css文件共享变量.我试过variables.css包含类似的东西:

:root {
  --gutter-width: 1rem;
  --outer-margin: 2rem;
  ...
}

我然后导入所以它通过css加载器.问题是,其他文件没有接收到这些变量,所以要么这不起作用,要么我做错了(包括在组件css文件中直接工作).

有效的一件事是拥有一个styles.json带有以下webpack设置的文件:

postcss: function (webpack) {
    return [
        ...
        require("postcss-cssnext")({
          features: {
            customProperties: {
              variables: require('./src/styles.json')
            }
          }
        })
        ...
    ]
}

这个问题的主要问题是每次我改变一个变量我都要重新启动webpack dev服务器(所以重新加载webpack配置).这不太理想.

那么,有什么想法更好地做到这一点？

我有一些 CSS，我想要一个默认颜色，然后用一个变量覆盖它。当 CSS 变量不存在时，我想使用后备颜色。

:root {
    /*--tintColor: red;*/
}

.text {
    color: blue;
    color: var(--tintColor);
}

当变量没有像注释掉那样设置时，颜色变为黑色。在这种情况下，我希望在未定义变量时颜色回到蓝色。这可能吗？

我正在使用 CSS 自定义属性来设置 div 的背景图像。div 嵌套在锚标记内，以表示路由到另一个页面的可点击“卡片”。

在打开开发工具并禁用缓存的 Chrome 中，当我点击卡片时，背景图像闪烁。每次锚标记的状态发生变化时，它似乎都会再次获取图像。

此外，如果我在悬停时向锚标记添加文本装饰，则悬停时图像也会闪烁。

CSS看起来像：

:root {
  --image-url: url("https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80")
}

.image-div {
  height: 100px;
  width: 100px;
  background-image: var(--image-url);
  background-position: 0;
  background-size: cover;
}

见笔：https : //codepen.io/hally9k/pen/RmepVe

为应用程序做组件。对于部分想要添加传递一些可选强调色以获得输出的功能，例如：

<section style="--mycolor:red">
... //contents
</section>

其中“red”可以在页面构建期间作为颜色名称、#hex、“rgba()”或“hsla()”字符串传递到后端。它提供了将该颜色用于其子元素的机会section- 用于边框颜色、第一个字母、标记、背景等。

简单代码^:

<section style={`--mycolor:{color}`};>

不起作用，因为 next 需要可映射代码，但看起来 css 变量名称不能在内联语法中解析。我还可以用<style jsx>语句注入它：

<style jsx>{`
    section{
        --mycolor:  ${ color != '' ? color : 'var(--default-color)'};
    }
`}
</style>

但这个解决方案对于这样简单的任务来说看起来“肮脏”——添加了大量不必要的代码只是为了服务一个 CSS 规则。

我认为这可以通过类似的事情来实现

<section styles={myStyle}>

其中 myStyle 是jsx样式对象，但我不明白如何手动创建它（在示例中，它是唯一导入的道具，没有详细信息从哪里获得）。

那么有没有办法实现像这样的简单输出<section style="--mycolor:red">呢？

我使用一个简单的网格，其中的列数可以通过 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 变量设置的列大小的一半。 …