[JavaScript知识库] [scss 样式重置] 定义工具样式类快速开发项目

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> [scss 样式重置] 定义工具样式类快速开发项目 -> 正文阅读

[JavaScript知识库][scss 样式重置] 定义工具样式类快速开发项目

variabel.scss 定义项目中常用的颜色、字体大小及启动布局公共变量集合

// colors
$colors: ( "info": #4b67af, "primary": #db9e3f, "white": #fff, "light": #f9f9f9, "gray": #999, "gray-1": #666, "dark_1": #343440, "dark": #222, "black": #000, );
$border-color: #d4d9de;
$base-font-size: 1rem;
// font-size
$font-sizes: ( xxs: 0.6154, // 8px    
xs: 0.7692, // 10px
sm:0.9231, // 12px
md: 1, // 13px
lg:1.0769, // 14px
xl: 1.2308 // 16px
);
// flex-js
$flex-jc: ( start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, );
// flex-ai
$flex-ai: ( start: flex-start, end: flex-end, center: center, stretch: stretch);
// spacing
// .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;
$spacing-sizes: ( 0: 0, 1: 0.25, 2: 0.5, 3: 1, 4: 1.5, 5: 3, );

stylee.scss

样式重置类, 定义项目通用的公共类。

@import './variable.scss';
// reset
* {
    box-sizing: border-box;
    outline: none;
}

html {
    // 定义基础字体大小
    font-size: 13px;
}

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

a {
    color: inherit;
}

@each $colorkey,
$color in $colors {
    .text-#{$colorkey} {
        color: $color;
    }
    .bg-#{$colorkey} {
        background-color: $color;
    }
}

// text-algin
// 工具类 问题对题
// @each $var in list {集合}
@each $var in (left, center, right) {
    .text-#{$var} {
        text-align: $var !important;
    }
}

@each $sizeKey,
$size in $font-sizes {
    .fs-#{$sizeKey} {
        font-size: $size * $base_font-size;
    }
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

// flex
.d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

// flex 主轴布局方向处理
@each $key,
$value in $flex-jc {
    .jc-#{$key} {
        justify-content: $value;
    }
}

// flex 侧轴布局
@each $key,
$value in $flex-ai {
    .ai-#{$key} {
        align-items: $value;
    }
}

// 左侧固定, 右侧自适应
.flex-1 {
    flex: 1;
}

.flex-grow-1 {
    flex-grow: 1;
}

// spacing
// .mt-1 => margin top .pb-2
@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 {
        .#{$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 $spacing-sizes {
            .#{$typeKey}#{$directionKey}-#{$sizeKey} {
                #{$type}-#{$direction}: $size * $spacing-base-size;
            }
        }
    }
}

利用 SCSS 生成常用样式, 方便后台项目使用。
在style.scss 中引入variable.scss，在 vue 项目入口文件引入 style.css。
然后在项目中就可以很方便的使用这些样式了。

举例

快速实现div 容器中使用 flex 布局及文字水平居中效果

<template>
  <!-- 使用 style.scss 中的公共样式快速开发 -->
  <!-- d-flex: 使用 flex 布局, 主轴布局: jc-betwee -> justify-content: space-between-->
  <div class="nav d-flex jc-between">
    <!-- text-center: 文本居中 -->
    <div class="nav-item text-center">1</div>
    <div class="nav-item text-center">2</div>
    <div class="nav-item text-center">2</div>
  </div>
</template>

<style lang="scss">
  .nav {
    width: 500px;
    .nav-item {
      width: 100px;
      height: 100px;
      background-color: #008c8c;
      color: #fff;
      line-height: 100px;
    }
  }
</style>