Project initialization study notes

1. Vue project installs SCSS

Project initialization

1. body
2. html
3. text color
4. article size
5. background color
6. border color
7. box model
8. a tag style
9. Optional tags remove margin, padding
10. button

set style

*{
    
    
  box-sizing: border-box;
  outline: none; 
}
html,body{
    
    
  margin: 0;
}
h1,h2,h3,h4,h5,p,div,ul{
    
    
  padding: 0;
  margin: 0;
}
html{
    
    
  font-size: 13px;
}
body{
    
    
  font-family:  Arial, Helvetica, sans-serif;
  background: #f1f1f1;
  -webkit-font-smoothing: antialiased;
}
a{
    
    
  color: #999;
  text-decoration: none;
}
button{
    
    
  border: none;
}

set text alignment

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

Set background color and article color

/* 设置背景颜色和文章颜色 */
$colors:(
  'dark':#131528,
  'danger':#db9e3f,
  'white': #fff,
  'grey':#999,
  'grey-1':#333
);
@each $key,$value in $colors {
    
    
  .bg-#{
    
    $key}{
    
    
    background-color: $value;
  }
  .text-#{
    
    $key}{
    
    
    color: $value;
  }
};

set margin padding

  /* 基础base */
$spaceing-base-size:1rem;
  /* 方向 */
$spaceing-directions:(
  t:top,
  l:left,
  b:bottom,
  r:right
);
/* margin还是padding */
$spaceing-types:(
  m:margin,
  p:padding
);
/* 设置px大小 */
$spacing-sizes: (
  0: 0,
  1: 0.25,
  2: 0.5,
  3: 1,
  4: 1.5,
  5: 3,
);
/* 循环 加载出来 */
@each $typesKey,$typesVal in $spaceing-types {
    
    
  /* 单个margin padding */
      @each $directionsKey,$directionsVal in $spaceing-directions {
    
    
        @each $sizeKey,$sizeVal in $spacing-sizes {
    
    
          .#{
    
    $typesKey}#{
    
    $directionsKey}-#{
    
    $sizeKey}{
    
    
            #{
    
    $typesVal}-#{
    
    $directionsVal}: $sizeVal * $spaceing-base-size;
          }
         
        }
      };
   /* 左右margin padding  */
    @each $sizeKey,$sizeVal in $spacing-sizes {
    
    
       .#{
    
    $typesKey}x-#{
    
    $sizeKey}{
    
    
         #{
    
    $typesVal}-left: $sizeVal * $spaceing-base-size;
         #{
    
    $typesVal}-right: $sizeVal * $spaceing-base-size;
       }
     }
     /* 上下 margin padding */
     @each $sizeKey,$sizeVal in $spacing-sizes {
    
    
      .#{
    
    $typesKey}y-#{
    
    $sizeKey}{
    
    
        #{
    
    $typesVal}-top: $sizeVal * $spaceing-base-size;
        #{
    
    $typesVal}-bottom:$sizeVal * $spaceing-base-size;
      }
    }
}