使用calc（）中先前定义的样式的CSS

我如何访问CSS 3中先前定义的样式以用于我的计算？我想知道如何使用，因为这样我就可以使用width:calc80%-calcpadding/2，但我不确定如何在CSS中直接获得填充

#main {
    padding: 10px;
    /* This is how we might do it - remember, we want our width to be 100% - 20px. */
    /* See this.padding? */
    width: calc(80% - calc(this.padding * 2));
    /* Of course, it could be something like self.padding: */
    width: calc(80% - calc(self.padding * 2));
    /* Or even just (and best of all): */
    width: calc(80% + calc(padding * 2));
}

/* What would be even more awesome is if we could get properties from other styles: */

#demo1 {
    font-family: Monaco;
}

#demo2 {
    font-family: #demo1;
}

/* Of course, we can do this if #demo2 is inside of #demo1: */

#demo1 {
    font-family: Monaco;
}

#demo2 {
    font-family: inherit;
}

/* But we want to do this without having it use inherit. */

---

你知道怎么做吗？我不想使用SASS或var，因为它只在Firefox中受支持。

更接近的重复：我的答案提到了var，但这只是因为它是唯一可能的解决方案。如果calc允许直接引用其他属性，那么var就不必存在。对于您的特定问题，请使用border size:border box；。这让填充成为宽度的一部分，您的问题可以在不进行疯狂计算的情况下得到解决。