使用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，簡單又直觀！