动态生成类的名称，并在萨斯

Question

CSS属性我要动态地生成非常具体的类名和属性与SCSS萨斯版本3

如果整除的迭代和条件检查了一半，在末尾加上一半。 如果0.25后缀而已，后缀以 '一季度' 如果0.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} ... 

Answer 1

如果你会允许你可以做的命名略有变化：

$count: 2; 
@for $i from 0 through $count * 4 { 
    .m-a-#{ floor($i/4) }#{ nth(null -1q -half -3q, $i % 4 + 1) } { 
    margin: $i/4 * 1rem; 
    } 
} 

// output 
.m-a-0  { margin: 0rem; } 
.m-a-0-1q { margin: 0.25rem; } 
.m-a-0-half { margin: 0.5rem; } 
.m-a-0-3q { margin: 0.75rem; } 
.m-a-1  { margin: 1rem; } 
.m-a-1-1q { margin: 1.25rem; } 
.m-a-1-half { margin: 1.5rem; } 
.m-a-1-3q { margin: 1.75rem; } 
.m-a-2  { margin: 2rem; }