动态CSS属性值取决于其类/ ID名称

Question

我想知道是否有办法动态设置一个取决于其名称的css属性值。例如：

.m-b-5 {
    margin-bottom: 5px;
}

其中5px引用其类/ id名称。

Answer 1

纯CSS没有。 CSS的唯一方法是创建你在开始时使用的所有类：

.m-t-10{ margin-top: 10px }
.m-t-20{ margin-top: 20px }
.m-t-30{ margin-top: 30px }
/* etc margin */

.p-t-10{ padding-top: 10px }
.p-t-20{ padding-top: 20px }
.p-t-30{ padding-top: 30px }
/* etc padding */

或者您可以使用LESS / SCSS /其他一些CSS预处理器来创建一个创建这些类的mixin /函数。

Boostrap V4包含相同的功能check the source code to get the idea。