html中动态类名,在Sass中动态生成类名和CSS属性

我想在SCSS Sass Version 3中用迭代器和条件检查器动态生成非常特定的类名称和属性。

如果可以整除一半，最后加一半。

如果只有.25后缀，后缀为'1q'

如果.75后缀，后缀为'3q'

例：

// margin classes

// classes m-a-0 to m-a-5, 1/4 rems specified by 1q, half, 3q

// // m-a-1q is 1/4 rem, m-a-1-1q is i.25rem

.m- {

&a-0 {

margin: 1rem * 0;

}

&a-1q {

margin: 1rem * 0.25;

}

&a-half {

margin: 1rem * 0.5;

}

&a-3q {

margin: 1rem * 0.75;

}

&a-1 {

margin: 1rem * 1;

}

&a-1-1q {

margin: 1rem;

}

&a-1half {

margin: 1rem * 1.5;

}

&a-1-3q {

margin: 1rem * 1.75;

}

&a-2 {

margin: 1rem * 2;

}

&a-2-1q {

margin: 1rem * 2.25;

}

&a-2half {

margin: 1rem * 2.5;

}

&a-2-3q {

margin: 1rem * 2.75;

}

}应该生成：

.m-a-0{margin:0rem}.m-a-1q{margin:0.25rem}.m-a-half{margin:0.5rem}.m-a-3q{margin:0.75rem}.m-a-1{margin:1rem} ...