标签: css-variables

我正在尝试使用CSS变量进行一些实验,我无法使用它或找到任何有关它的文档.有谁知道在CSS3选择器中是否可以使用CSS var？

我做了以下示例来解释我正在尝试做什么.此示例仅适用于Chrome.

的jsfiddle

http://jsfiddle.net/68Rrn/

CSS

:root {
    -webkit-var-count: 5; /* define my var! */
}

li {
    width:100px;
    height:100px;
    background-color:blue;
    display:inline-block;
    list-style:none;
}


ul li:nth-child(4) {
    background-color:red;
}

ul li:nth-child(-webkit-var(count)) { /* I can't get this working, is it even supported? I'm trying to target the 5th element with my var. */
    background-color:black;
}

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

我的Chrome浏览器刚刚从版本28切换到版本29.一旦切换,我的css3代码在新版本中停止工作,我想知道是否有人知道如何解决问题,而不必将浏览器设置回版本28？

更新Chrome 30从Chrome 29过渡到Chrome 30也杀死了CSS变量.在启用实验性WebKit功能标志不再是一个选项.

我一直在使用实验性WebKit功能,特别是CSS变量.我特别希望再次使用以下功能:

:root { 
  -webkit-var-Darkest: #3d0305;
  -webkit-var-Lightest: #EDD08C;
  -webkit-var-Light: #a98b46;
  -webkit-var-Cool: #38fcce;
  -webkit-var-Dark: #79161d;

  color: -webkit-var(Darkest);
  border-color: -webkit-var(Darkest);
  background-color: -webkit-var(Light);
}

以前我只能使用CSS变量来启用标志(见下图)

有没有办法检测浏览器是否支持CSS自定义属性(例如color: var(--primary))？

我需要编写一个脚本,在不支持自定义属性的浏览器中行为略有不同,但我找不到任何记录的Modernizr测试,也没有任何关于访问自定义属性的Javascript接口的信息.

将不胜感激任何建议!

例如,我可以使用这样命名的css变量: --Button.onHover？

请注意,CSS变量与CSS选择器不同(我必须解释这个,因为有人将此标记为重复).这是模块superfly-css-variables-colors的一个例子:

      :root {
        --percentage-lightest:  91%;
        --percentage-lighter:   78%;
        --percentage-light:     65%;
        --percentage-median:    52%;
        --percentage-dark:      39%;
        --percentage-darker:    26%;
        --percentage-darkest:   13%;

        --percentage-low: 25%;
        --percentage-high:  50%;

        --percentage-link-hover: 25%;
      }

假设你有一个颜色的 CSS 自定义属性：

--color: 255,0,0

并且您希望每次都根据需要rgb或rgba根据需要专门混合它。这是有效的 CSS：

rgba(var(--color), .3)

...但是Sass 爆炸了。我一直试图看看我是否可以编写一个 mixin 或其他东西，但我无法弄清楚如何解决 Sass 坚持使用它自己的颜色函数的问题，即使它们不是必需的。

我一直在努力使它工作一段时间。

关键是内部div将具有某种形状，并且可能会有多个形状（这就是我使用nth-child选择器的原因）。应该显示此内部div，然后将其再次隐藏一段时间。问题是，我想在一个动画中为所有（后来的）多个内部div设置动画。为此，我认为我可以使用CSS变量，但这似乎不起作用。

在这个示例中，我试图归档的是内部div基本上只是通过使用变量来闪烁。但是我在Firefox中的结果只是一个黑匣子。

我有什么想念的吗？我已经检查了是否可以在其中使用CSS变量，@keyframes并且可以肯定。动画中它们的唯一问题似乎是它们之间没有插值，但是它们突然切换，在这种情况下这不是问题。

@keyframes test{
    from{
        --one: 0;
    }
    to{
        --one: 1;
    }
}

#test{
    width: 100px;
    height: 200px;
    background-color: black;
    animation: test 1s infinite;
}
#test :nth-child(1){
    width: 20px;
    height: 20px;
    margin: auto;
    background-color: white;
    opacity: var(--one,0);
}

<div id="test">
    <div></div>
</div>

为了确保可读性和可维护性，我想声明几个值，例如颜色，但只声明一次。

我遇到的问题是，似乎不可能将 sass 函数的结果甚至简单的变量直接分配给 css 变量。

.some-selector {
    --my-css-variable: $my-color; // nope
    --my-css-variable: mySassFunction(); // nope
    --my-css-variable: transparentize($my-color, .5); // nope
    --my-css-variable: copy-pasted-value; // alright
}

我似乎无法在搜索引擎上找到任何答案，最多只能找到不相关的主题。你可以帮帮我吗？

我将 div 的显示属性设置为in line-block。然后我创建了四个类：

• no-var，将显示设置为inherit
• var，它将显示设置为变量inherit
• var-none，将显示设置为变量none
• var-default，将显示设置为变量设置为inherit，默认值为grid

不过，每个类使用的实际样式似乎并不正确：

• no-var 类正确继承了 display 到block
• var 类不会inherit从变量中获取值并显示为inline-block
• var-none 类正确设置显示none并隐藏
• var-default 类不会inherit从变量中获取值并将显示设置为默认值

对于每个类，我添加了颜色属性的变量和默认值，它们都按预期工作。inherit变量和值是否应该被忽略unset？

:root {
  --display: inherit;
  --display-none: none;
  --color: red;
}
div  {
  display: inline-block;
  color: green;
}
.no-var {
  display: inherit;
  color: red;
}
.var {
  display: var(--display);
  color: var(--color);
}
.var-none {
  display: var(--display-none);
}
.var-default {
  display: var(--display, grid); …

让我们考虑这个简化的示例，以说明问题：

:root {
  --color:rgba(20,20,20,0.5); /*defined as the default value*/
}

.box {
  width:50px;
  height:50px;
  display:inline-block;
  margin-right:30px;
  border-radius:50%;
  position:relative;
}
.red {background:rgba(255,0,0,0.5);}
.blue {background:rgba(0,255,0,0.5);}

.box:before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  border-radius:50%;
  transform:translateX(30px);
  background:var(--color);
  filter:invert(1);
}

<!-- we can add any color we want -->
<div class="box red" style="--color:rgba(0,255,0,0.5);">
</div>
<div class="box blue" style="--color:rgba(0,255,255,0.5);">
</div>

<!-- we can add the same color but this won't be dynamic -->
<div class="box red" style="--color:rgba(255,0,0,0.5);">
</div>

<!-- it would be good to be able to inherit the …

我正在寻找一种修改CSS变量的方法，就像在SCSS中一样

定义一个像主色这样的颜色，然后自动获得焦点和活动状态的阴影。基本上，想要更改css变量中的一个变量，并获得3种相同颜色的阴影。

我想在CSS中实现什么

$color-primary: #f00;

.button {
    background: $color-primary;

    &:hover,
    &:focus {
        background: darken($color-primary, 5%);
    }

    &:active {
        background: darken($color-primary, 10%);
    }
}

试图达到：

:root {
    --color-primary: #f00;
    --color-primary-darker: #f20000  //     var(--color-primary) * 5% darker
    --color-primary-darkest: #e50000 //     var(--color-primary) * 10% darker
}

.button {
    background: var(--color-primary);
}

.button:hover,
.button:focus {
    background: var(--color-primary-darker);
}

.button:active {
    background: var(--color-primary-darkest);
}