项目初始化学习笔记

1.Vue项目安装SCSS

项目初始化

1. body
2. html
3. 文字颜色
4. 文章大小
5. 背景颜色
6. 边框颜色
7. 盒子模型
8. a标签样式
9. 可选标签去除margin，padding
10. 按钮

设置样式

*{
    
    
  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;
}

设置文字对齐方式

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

设置背景颜色和文章颜色

/* 设置背景颜色和文章颜色 */
$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;
  }
};

设置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;
      }
    }
}