【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（3.1-3.5）

【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（3.1-3.5）

本项目是 学习Bilibili 全栈之巅 视频教程相关源码和体会
https://gitee.com/blaunicorn/node-vue-wangzherongyao
持续更新中…

3.1-3.2 Web界面安装sass 和样式重置

// sass-loader 最新版会不兼容，所以要安装老版本
npm install -D sass
npm install -D sass-loader@7.x

// 新建src/style/index.scss，重置并设置样式
// reset

* {
    box-sizing: border-box; //  统一margin、padding样式
    outline: none; // 取消tab高亮
}
html {
    font-size: 13px;
}
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.2rem;
    background-color: #f1f1f1;
}
a {
    color: #999;
}

3.3 web端src/style/index.scss，网站色彩和字体定义,熟悉函数的使用

// colors 定义颜色,注意是内部逗号结尾，外部分号结尾
$colors: (
    'primary': #db9e3f,
    'white': #fff,
    'black': #000,
   'dark':#222,
   'grey':#999,
   'light':#f9f9f9,
   'dark-1':#343440

);
@each $colorKey,$color in $colors {
    .text-#{$colorKey} {
        color: $color;
    }
    .bg-#{$colorKey} {
        background-color: $color;
    }
}
// text 文字对齐方式
@each $var in (left,center,right) {
    .text-#{$var} {
        text-align: $var;
    }
};
// font size
$base-font-size: 1rem;
$font-sizes: (
    xs: .769231,  // 10px
    sm: .923077,  //12px
    md:1,  //13px
    lg: 1.076923, //14px
    xl: 1.230769, //16px
    );
@each $sizeKey,$size in $font-sizes {
    .fs-#{$sizeKey} {
        font-size: $size * $base-font-size;
    }
}

3.4 web端src/style/index.scss，通用flex布局样式定义

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

3.5 web端src/style/index.scss，常用边距margin、padding定义

// spacing
// 0-5 : 0
// .mt-1 margin top level1; .pb-2 padding bottom level2
// 类型
$spacing-types: (m: margin,p: padding);
// 方向
$spacing-directions: (t: top,r:right,b:bottom,l:left);
// 定义单位尺寸
$pacing-base-size: 1rem;
$spaceing-sizes: (0:0,1:0.25,2:0.5,3:1,4:1.5,5:3);
// @each $typeKey,$type in $spacing-types {
//     .#{$typeKey} {
//         #{$type}: 0
//     }
// }
// 根据上面的结构，去三级嵌套循环,生成带方位和不带方位的
@each $typeKey,$type in $spacing-types {
    // .m-1 不带方位的形式
        @each $sizeKey,$size in $spaceing-sizes {
            // .m-1 {margin:0.25rem}
            .#{$typeKey}-#{$sizeKey}{ 
                #{$type}:$size*$pacing-base-size}
        }
    // .mt-1 带方位的形式
    @each $directionKey,$direction in $spacing-directions {
        @each $sizeKey,$size in $spaceing-sizes {
            // .mt-1 {margin-top:0.25rem}
            .#{$typeKey}#{$directionKey}-#{$sizeKey}{ 
                #{$type}-#{$direction}:$size*$pacing-base-size
            }
        }
    }
    // .mx-1 水平左右保持一致 .my-1 垂直上下保持一致
            @each $sizeKey,$size in $spaceing-sizes {
            // .mx-1 {margin:0.25rem}
            .#{$typeKey}x-#{$sizeKey}{ 
                #{$type}-left:$size*$pacing-base-size;
                #{$type}-right:$size*$pacing-base-size;
            }
            // .my-1 {margin:0.25rem}   
            .#{$typeKey}y-#{$sizeKey}{ 
                #{$type}-top:$size*$pacing-base-size;
                #{$type}-bottom:$size*$pacing-base-size;
            }
        }
}