依赖于它的类/id名的动态CSS属性值

Question

我想知道是否有一种方法可以动态地设置css属性值，这取决于它的名称。例如:

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

其中5px引用了它的类/id名

Answer 1

使用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包含相同的功能，因此请查看源代码以了解其想法。