最详细预处理器scss具体演示，通过each循环样式添加类名，大大提高开发效率和大幅度减少css代码量

这里具体怎么安装scss我就不说了，网上有很多，具体说一下怎么使用

首先我们想定义几种颜色的

自我感觉这相当于一个键值对
$colors:(
  "primary":#db9e3f,
  "white":#fff,
  "light":#f9f9f9,
  "grey":#999,
  "grey-1":#666,
  "dark-1":#343440,
  "dark":#222,
  "black":#000
);

接下来通过

@each $colorKey,$color in $colors {
  .text-#{$colorKey}{
    color: $color;
  }
  }

我们就拥有了这几个类名，里面每个类名对应不同的颜色
如果我们也想加背景颜色呢？
简单

	@each $colorKey,$color in $colors {
	  .text-#{$colorKey}{
	    color: $color;
	  }
	   .bg-#{$colorKey}{
    background-color: $color;
     }
	  }

这样写，结果是，这里我只显示出一部分看一下

然后我们全局引入,这样在全局都可以使用这个样式

怎么用呢？
我们写一个标签

 <div class=" bg-black"> //这样就能使用了

当然你也可以定义一些padding，margin，,flex布局，字体大小啊什么的，在这我演示几个

.d-flex{
  display: flex;
}
$flex-jc:(
  start:flex-start,
  end:flex-end,
  center:center,
  between:space-between,
  around:space-around
);
@each $key,$value in $flex-jc {
  .jc-#{$key}{
    justify-content: $value;
  }
}

.flex-column{
  flex-direction: column;
}

$flex-ai:(
  start:flex-start,
  end:flex-end,
  center:center,
  stretch:stretch
);
@each $key,$value in $flex-ai {
  .ai-#{$key}{
    align-items: $value;
  }
}

想用flex布局怎么办

<div class="d-flex ai-center">
就相当于display:flex ,align-items:center

演示一下padding和margin，这个我们用的特别多

$spacing-types:(m:margin,p:padding);
$spacing-directions:(t:top,r:right,b:bottom,l:left);
$spacing-base-size:1rem;
$spacing-sizes:(0:0, 1:0.25, 2:0.5, 3:1, 4:1.5, 5:3);

//m-0,mx-0
@each $typeKey,$type in $spacing-types {
  
//.m-1
@each $sizeKey,$size in $spacing-sizes {
  .#{$typeKey}-#{$sizeKey}{
    #{$type}:$size * $spacing-base-size;
  }
}
//.mx-1,.my-1
  @each $sizeKey,$size in $spacing-sizes {
    .#{$typeKey}x-#{$sizeKey}{
      #{$type}-left:$size * $spacing-base-size;
      #{$type}-right:$size * $spacing-base-size;
    }
    .#{$typeKey}y-#{$sizeKey}{
      #{$type}-top:$size * $spacing-base-size;
      #{$type}-bottom:$size * $spacing-base-size;
    }
  }
//.mt-1
@each $directionKey,$directon in $spacing-directions {
  @each $sizeKey,$size in $spacing-sizes {
    .#{$typeKey}#{$directionKey}-#{$sizeKey}{
      #{$type}-#{$directon}:$size * $spacing-base-size;
    }
  }
}
}

当我们想用的时候怎么用呢？

<div class="py-2 px-3 ">
px-3意思就是，左右padding值为1rem,1rem怎么得来的？？？

$spacing-sizes:(0:0, 1:0.25, 2:0.5, 3:1, 4:1.5, 5:3);首先是这
 #{$type}-left:$size * $spacing-base-size 相乘
 
 py-2就是,上下padding值为0.5rem

后面还有什么问题可以私聊我?