使用sass语法生成自己的css的样式库

前言

先说一下 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，简单又直观！