在Sass中动态生成类名和CSS属性
我想在SCSS Sass版本3中使用迭代器和条件检查器动态生成非常特定的类名和属性 如果可以被一半整除,则在末尾加上一半。 如果仅为.25后缀,则后缀为“1q” 如果后缀为.75,则后缀为“3q” 例如:在Sass中动态生成类名和CSS属性,css,sass,iterator,dynamically-generated,rscss,Css,Sass,Iterator,Dynamically Generated,Rscss,我想在SCSS Sass版本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 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} ...
如果您允许对命名进行细微更改,您可以执行以下操作:
$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; }