[scss 样式重置] 定义工具样式类,快速开发项目

爱心天使的守护

已于 2022-05-05 22:14:06 修改

阅读量599

点赞数

分类专栏：前端文章标签： scss css css3

于 2022-05-05 12:51:53 首次发布

本文链接：https://blog.youkuaiyun.com/aixintianshideshouhu/article/details/124586319

版权

前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何使用SCSS（Sass）预处理器来定义颜色、字体大小、布局变量等，并展示了如何创建重置样式、文本对齐、flex布局和间距工具类。通过引入变量和混合宏，可以简化CSS代码，提高代码复用性和可维护性，加速前端项目的开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>