【笔记：sass】 sass使用小技巧

1.颜色

注意：在$colors定义之后面需要以分号结尾(😉 不然后面定义@each会报错

// colors 定义颜色
$colors:("primary":#db9e3f,
    "white":#fff,
    "light":#f9f9f9,
    "grey":#999,
    "dark-light":#343440,
    "dark":#222,
    "black": #000,
);
// 循环遍历生成颜色类
@each $colorKey,$color in $colors {
   .text-#{$colorKey}{
       color: $color;
   } 
    //生成背景
   .bg-#{$colorKey}{
       background: $color;
   }
}

2.文字对齐

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

3.字体大小

注:这里可以使用vscode插件 px to rem 进行px转换rem

安装之后快捷键：alt+s 设置转换的默认字体大小(默认16px) 然后输入字体大小之后按 alt+z可自动转换

// font size  
$base-font-size:1rem;
$font-sizes:(
    xs:0.7692, //10px
    sm:0.9231, //12px
    md:1,      //13px
    lg:1.0769, //14px
    xl:1.2308  //16px
);
@each $sizeKey, $size in $font-sizes{
    .fs-#{$sizeKey}{
        font-size: $size * $base-font-size;
    }
}

4.flex

//flex
.d-flex{
    display: flex;
}
.flex-column{
    flex-direction: column;
}
//justify-content
$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;
    }
}
//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-grow-1{
    flex-grow: 1;
}

1. margin padding

   // spacing (margin,padding)
   // .mt-1 => margin top 
   // .pt-1 => padding top 
   $spacing-types:(
     m:margin,
     p:padding
   );
   $spacing-directions:(
     t:top,
     b:bottom,
     l:left,
     r:right
   );
   $spacing-base-size:1rem;
   $spacing-sizes:(
       0: 0,
       1: 0.25,
       2: 0.5,
       3: 1,
       4: 1.5,
       5: 3
   );
   @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 {
           //.mx-1
           .#{$typeKey}x-#{$sizeKey} {
               #{$type}-left : $size * $spacing-base-size ;
               #{$type}-right : $size * $spacing-base-size ;
           }
           //.my-1
           .#{$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 ;
               }
           }
       }  
   }