scss预处理器在项目中的常见用法

循环生成字体水平方向上的对齐样式

@each $var in (left,center,right) {
  .text-#{var} {
    text-align: $var;
  }
}

定义网站色彩的基本样式库

1,定义网站的主色调

$colors: (
        'primary': #db9e3f,
        'info': #4b67af,
        'danger': #791a15,
        'blue-1': #1f3695,
        'blue': #4394e4,
        'white': #fff,
        'white-1': #fcfcfc,
        'white-2': #eceef0,
        'light': #f9f9f9,
        'light-1': #d4d9de,
        'grey': #999,
        'grey-1': #666,
        'dark-1': #343440,
        'dark': #222,
        'black': #000,
);

2.根据主色调生成字体样式和背景

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

生成网站的标准字体大小

1.首先，定义基本字体大小

$base-font-size: 1rem;

2.然后按照一定比列，得到其他的字体大小

$font-sizes: (
  xs:0.7692, //10px
  sm:0.9231,// 12px
  md:1, //13px
  lg: 1.0769, //14px
  xl:1.2308,
);

3.循环生成字体大小

@each $sizeKey, $size in $font-sizes {
  .fs-#{$sizeKey}{
    font-size: $size * $base-font-size;
  }
}

通用flex布局方式

1.flex基本布局

.d-flex {
  display: flex;
}

2.主轴的对齐方式

$flex-jc:(
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around,
);

3.循环生成主轴上的对齐样式

@each $key,$value in $flex-jc {
  .jc-#{$key} {
    justify-content: $value;
  }
}

同理，生成align-items的样式

$flex-ai:(
  start:flex-start,
  end:flex-end,
  center:center,
  stretch:stretch,
);

@each $key,$value in $flex-ai {
  .ai-#{$key} {
    align-items: $value;
  }
}

左边固定，右边自动占满

.flex-1 {
  flex:1;
}

// 精确写法
.flex-grow-1 {
  flex-grow:1;
}

规范网站边距

定义基本边距尺寸，方便以后修改

$spacing-base-size: 1rem;

定义边距的类型

$spacing-types:(
  m:margin,
  p:padding,
);

定义边距的方向

$spacing-directions:(
  t:top,
  r:right,
  b:bottom,
  l:left,
);

定义边距大小，设置0-5六个等级

$spacing-sizes:(
  0:0,
  1:0.25,
  2:0.5,
  3:1,
  4:1.5,
  5:3,
);

准备工作完成，循环生成三类样式，分别是
1.margin-top margin-bottom margin-left margin-right
2.margin，padding样式，及上下左右四个方向都有样式
3.左右，上边的margin和padding值

@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 x表示水平方向上的边距，y表示竖直方向上的边距
  @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, $direction in $spacing-directions {
    @each $sizeKey, $size in $spacing-sizes {
      .#{$typeKey}#{$directionKey}-#{$sizeKey} {
        #{$type}-#{$direction}: $size * $spacing-base-size;
      }
    }
  }
}

网站基本样式规范完毕！！！