带有算术运算的CSS变量在简写属性中不起作用？

请帮我找出为什么CSS变量中的算术运算会破坏代码。带有算术运算的CSS变量在简写属性中不起作用？

我开始用一个规则简单的CSS文件：

html { 
    font: 16px/32px Arial; 
}

在浏览器中，它可以作为书面：字体大小是16像素，行高为32PX，和字体本身是宋体。

然后，我添加了变数：

html { 
    --default-font-size: 16px; 
    --default-line-height: var(--default-font-size); 
    font: var(--default-font-size)/var(--default-line-height) Arial; 
}

它的工作原理也一样;认为行高是16px，因为我将它等于字体大小。

但是，当我multiplicated第二值，字体声明停止工作：

html { 
    --default-font-size: 16px; 
    --default-line-height: var(--default-font-size) * 2; 
    font: var(--default-font-size)/var(--default-line-height) Arial; /* not working! */ 
}

所有属性font-size，line-height，并且font-family设置为浏览器的默认值。

如果我分裂font速记属性分为三种不同的手写性能，代码再次OK作品：

html { 
    --default-font-size: 16px; 
    --default-line-height: var(--default-font-size) * 2; 
    font-size: var(--default-font-size); 
    line-height: var(--default-line-height); 
    font-family: Arial; 
}

什么是错上面的代码示例，是有办法让它不拆分工作到手写属性？

来源

2017-10-20 Hydrochoerus Hydrochaeris

你确定第三个正在被使用？它不应该是太 –

@TemaniAfif，你是对的，它的工作部分：设置'font-size'和'font-family'，但'行高'不是。 –

是的，在这种情况下，它是逻辑，行高不应该在第三种情况下工作...它也需要'calc'功能;） –

您需要使用calc这样的：

html { 
    --default-font-size: 16px; 
    --default-line-height: calc(var(--default-font-size) * 2); 
    font: var(--default-font-size)/var(--default-line-height) Arial; 
}

的--default-line-height是越来越evalutated所以你有这样的事情（无效）前更换的font属性：

font: var(--default-font-size)/var(--default-font-size) * 2 Arial;

通过使用calc您可以评估表达式，并且您有一个有效的语法。即使你的第三个例子也不行。在CSS不承认乘号，因为它应该内calc

p { 
 
    --default-font-size: 16px; 
 
    --default-line-height: calc(var(--default-font-size) * 4); 
 
    font: var(--default-font-size)/var(--default-line-height) Arial; 
 
}

<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

来源

2017-10-20 14:12:12

但是这段代码似乎不适用于**在Firefox中**，而在其他浏览器中工作。是代码还是Firefox的错？ '：root { --grid-spacing：12px; --font-size-default：calc（var（ - grid-spacing）* 4/3）; --line-height-default：calc（var（ - grid-spacing）* 2）; } html { font：var（ - font-size-default）/ var（ - line-height-default）Arial; }' –

带有算术运算的CSS变量在简写属性中不起作用？

回答

相关问题