Sass 还可以这么玩 —— Sass 批量生成 padding 和 margin

Sass 还可以这么玩 —— Sass 批量生成 padding 和 margin

有时候，我们需要为上下左右批量添加不同尺寸的 padding 和 margin，比如 .m-0, m-1, m-2, ..., .mt-0, .mt-1,...，我们可以自己写这些类，但这会很繁琐且易出错。

幸运的是，我们可以使用 Sass 快速生成。

Sass 是一个 css 预处理器。

让我们看一个简单的例子，在 0em 到 7em 的所有方向上创建 padding 和 margin。

1. 定义列表

   首先定义两个列表，一个包含 em 范围，另一个包含方向字符串。

   $ems: 0, 1, 2, 3, 4;
   $directions: "", "-bottom", "-top", "-left", "-right";
   

   在 Sass 中，列表变量定义方式为： $variableName: itemOne，itemTwo;

   接下来，嵌套循环两个列表。这样，内层循环就可以获取到 $em 和 $dir

   @each $em in $ems{
     @each $dir in $directions {
     }
   }
   

2. 生成结果

   • 利用 str-slice 函数获取类名方向

     注意 sass 中列表和字符串的起始位置为 1 而不是大多数语言中的 0

     $dir-alias: str-slice($dir, 2, 2);
     

     这样就可以获取到 b, t, l, r

   • 变量使用

     .m#{$dir-alias}-#{$em} {
       margin#{$dir}: $em + em;
     }
     .p#{$dir-alias}-#{$em}{
       padding#{$dir}: $em + em;
     }
     

     sass 变量在字符串中需要使用 #{变量} 才能生效，这样，运行 sass 代码，就可以得到如下结果，不再需要自己手写，真香

     .m-0 {
       margin: 0em;
     }
     
     .p-0 {
       padding: 0em;
     }
     
     .mb-0 {
       margin-bottom: 0em;
     }
     
     .pb-0 {
       padding-bottom: 0em;
     }
     
     .mt-0 {
       margin-top: 0em;
     }
     
     .pt-0 {
       padding-top: 0em;
     }
     
     .ml-0 {
       margin-left: 0em;
     }
     
     .pl-0 {
       padding-left: 0em;
     }
     
     .mr-0 {
       margin-right: 0em;
     }
     
     .pr-0 {
       padding-right: 0em;
     }
     
     .m-1 {
       margin: 1em;
     }
     
     .p-1 {
       padding: 1em;
     }
     
     .mb-1 {
       margin-bottom: 1em;
     }
     
     .pb-1 {
       padding-bottom: 1em;
     }
     
     .mt-1 {
       margin-top: 1em;
     }
     
     .pt-1 {
       padding-top: 1em;
     }
     
     .ml-1 {
       margin-left: 1em;
     }
     
     .pl-1 {
       padding-left: 1em;
     }
     
     .mr-1 {
       margin-right: 1em;
     }
     
     .pr-1 {
       padding-right: 1em;
     }
     
     .m-2 {
       margin: 2em;
     }
     
     .p-2 {
       padding: 2em;
     }
     
     ... /* There should be 80 Classes like this */
     

3. 完整 sass 代码

   $ems: 0, 1, 2, 3, 4;
   $directions: "", "-bottom", "-top", "-left", "-right";
   
   @each $em in $ems{
     @each $dir in $directions {
       $dir-alias: str-slice($dir, 2, 2);
         .m#{$dir-alias}-#{$em} {
           margin#{$dir}: $em + em;
         }
         .p#{$dir-alias}-#{$em}{
           padding#{$dir}: $em + em;
         }
     }
   }