这篇博客介绍了如何利用SCSS的循环和变量功能来减少前端样式代码的冗余，例如通过设置固定宽度和margin、padding的快捷方式，实现更高效、整洁的代码组织。示例中展示了如何定义不同宽度的类以及固定的margin、padding，便于快速创建各种尺寸的元素。
在开发过程中会遇到，一个组件用不同的宽度，这时这个样式就可以减少冗余的代码了，非常好用。
/** 设置固定宽度 START **/
$total: 600;
@for $i from 1 to $total {
.w_#{$i} {
width: #{$i}px !important;
}
}
.w_886 {
width: 886px!important;
}
/** 设置固定宽度 END **/
/** 固定的margin、padding START **/
.ml-8 {
margin-left: 8px;
}
/** 固定的margin、padding END **/
例如
//这样就实现了宽度为100的长方形
<div class=''W_100></div>
这个简单的功能就实现了
1708
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
