前言
先说一下 sass 和 scss的区别
sass 是一种缩进语法（即没有花括号和分号，只使用换行 缩进的方式去区别子元素，PS：这是我个人的理解）
scss 是css-like语法 （它的语法更css很像，使用花括号和分号，去区分子元素）
详细的 自行google或者百度噢
现在我们可以使用scss里的变量和循环语法生成自己的css样式库，方便自己的开发
首先，先定义盒子模型的属性 和 方向
$box-prop: ( ‘padding‘ , ‘margin‘, ‘border‘ )
$box-direaction: ( ‘top‘, ‘right‘, ‘bottom‘, ‘left‘ )
接下来，使用循环的语法
/* 盒子模型: Margin Border Padding -------------------------- */ $box-max: 20; $box-step: 2; $box-prop: (‘padding‘ , ‘margin‘, ‘border‘); $box-direaction: (‘top‘, ‘right‘, ‘bottom‘, ‘left‘); /* 生成间隔为2的 .margin-left-2 .margin-left-4 ... -------------------------- */ $i: $box-step; @while $i <= $box-max { @each $way in $box-direaction { @each $prop in $box-prop { // padding-left-2 .#{$prop}-#{$way}-#{$i} { #{$prop}-#{$way}: #{$i}px; } // padding-2: 2px; .#{$prop}-#{$i} { #{$prop}: #{$i}px; } } } $i: $i + $box-step; }
通过这样简单的语法就可以实现，自己的样式库啦。
使用的方法就是直接给标签添加一个类型即可实现，如： <div class=‘margin-left-2‘ ></div>
这就相当于左外边距为 2px，简单又直观！
原文：https://www.cnblogs.com/andrewkz/p/11394940.html