Node.js+Vue.js全栈开发王者荣耀手机端官网和管理后台(三)

文章目录

工具样式概念和SASS

在这里插入图片描述

样式重置

style.scss

* {
    
    
    box-sizing: border-box;
    outline: none;
}

html {
    
    
    font-size: 13px;
}

body {
    
    
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.2em;
    background: #f1f1f1;
}

a {
    
    
    color: #999;
}

网站色彩和字体定义（colors text）

// colors
$colors: (
    "primary": #db9e3f,
    "white": #fff,
    "light": #f9f9f9,
    "grey": #999,
    "dark-1":#343440,
    "dark": #222,
    "black": #000,
);

@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: .7692, // 10px
    sm: .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;
    }
}

通用flex布局样式定义

style.css

// 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 {
    
    
    .jc-#{
    
    $key} {
    
    
        align-items: $value;
    }
}

.flex-1 {
    
    
    flex: 1;
}

常用边距定义（margin padding）

// spacing
// 0-5: 0
// .mt-1 => margin-top  .pb-2
$spacing-types: (m: margin, p: padding);
$spacing-directions: (t: top, r: right, b: bottom, l: left);

$spacing-base-size: 1rem;
$sapcing-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 $sapcing-sizes {
    
    
        // .mt-1 {
    
    margin-top: 0.25rem}
        .#{
    
    $typeKey}-#{
    
    $sizeKey} {
    
    
            #{
    
    $type}: $size * $spacing-base-size
        }
    }

    // .mx-1,  .my-1
      @each $sizeKey, $size in $sapcing-sizes {
    
    
        // .mt-1 {
    
    margin-top: 0.25rem}
        .#{
    
    $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 $sapcing-sizes {
    
    
            // .mt-1 {
    
    margin-top: 0.25rem}
            .#{
    
    $typeKey}#{
    
    $directionKey}-#{
    
    $sizeKey} {
    
    
                #{
    
    $type}-#{
    
    $direction}: $size * $spacing-base-size
            }
        }
    }
}