css根据应用于元素的类计算宽度

有没有一种方法可以创建某种CSS逻辑来读取应用于元素的CSS类并计算新的宽度

假设我有一个div元素宽度，类“grid_6”-宽度为480px。
然后我添加了几个其他类，如；pl8和pr16-左侧为8px填充，右侧为16px填充

是否有任何引擎可以读取这些规则，然后执行如下操作：grid_6-（p8+p16），然后将元素的新宽度设置为456px，以将总宽度保持在480px

我看过CSS calc（），但不知道如何制作我正在尝试的东西。。。 使用PHP当然是一个解决方案，但它将是内联css，这是一个糟糕的做法

我知道我可以有一个子元素，并设置它们的填充/边距/边框，以确保我不超过总宽度。但希望有一个更聪明的解决方案

有人知道吗？

尝试使用SASS：

它允许您计算并支持CSS规则的变量。

尝试使用SASS：

它允许您计算并支持CSS规则的变量。

使用

框大小调整

斯科特·克兰菲尔（Scott Cranfill）在评论中将此作为“解决方案”给出，但我不确定他为什么不将其作为解决方案发布。更改了宽度计算的方式。因此，只需添加以下内容：

.grid_6 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

或更一般地适用于所有网格元素：

[class^=grid] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;    
}

让我们通过其他类添加

填充

，而不影响

宽度

。无需复杂的计算。

使用

框大小调整

斯科特·克兰菲尔（Scott Cranfill）在评论中将此作为“解决方案”给出，但我不确定他为什么不将其作为解决方案发布。更改了宽度计算的方式。因此，只需添加以下内容：

.grid_6 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

或更一般地适用于所有网格元素：

[class^=grid] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;    
}

---

让我们通过其他类添加

填充

，而不影响

宽度

。不需要复杂的计算。

您是否考虑过

框大小：边框框

？您是否考虑过

框大小：边框框

？忘了提到我使用的更少。。。读了一些关于它的文章，但不知道怎么做…忘了提到我用的更少了。。。读了一点关于它的书，但不知道怎么做。。。