css --- > 使用scss生成常用的基本css样式

"工具样式"的概念和 SASS(SCSS)

在webpack中使用sass

安装sass和sass-loader

$ npm i sass sass-loader

由于使用了脚手架,安装完毕后重启前端即可

样式重置

其实就是样式的初始化

// reset

* {
  box-sizing: border-box; // 以边框为准. css3盒模型
  outline: none; // 不需要高亮: 有时候在页面中使用tab切换,a标签可能会出现高亮
}

html {
  font-size: 13px; // 定义网址的基础字体大小 1rem = 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,
);

使用网站的色调 + scss 生成网站的文字颜色和背景颜色

// $colors是上面定义的6种颜色
@each $colorKey, $color in $colors{
    .text-#{$colorKey}{
        color: $color
    }
    .bg-#{$colorKey} {
        background: $color
    }
}

以上生成的等价于下面的css(部分)

.text-white{
    color: #fff
}
.text-light{
    color: #f9f9f9
}
.text-grey: {
    color: #999
}

生成字体大小

假设网站主要有 10px、 12px、 13px、 14px和16px。我们想生成网站的主要字体尺寸(vscode中,下载插件 px to rem, 然后点击设置, 输入px to rem, 将Px-to-rem: Px-per-rem设为13).

之后写如下函数

// font size: 10px 12px 13px 14px 16px
$font-sizes: (xs: 10px, sm: 12px, md: 13px, lg: 14px, xl: 16px);

选中以上,按alt + z, 以上代码就变为如下

$font-sizes: (xs: 0.7692rem, sm: 0.9231rem, md: 1rem, lg: 1.0769rem, xl: 1.2308rem);

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

编译完后,会生成以下的css

.fs-xs {
    font-size: 0.7692rem
}
.fs-sm {
    font-size: 0.9231rem
}
.fs-md {
    font-size: 1rem
}
.fs-lg {
    font-size: 1.0769rem
}
.fs-xl {
    font-size: 1.2308rem
}

生成文本的左中右对齐

@each $val in (left, center, right) {
    .text-#{$val}{
        text-align: $val
    }
}

以上生成等价于下面

.text-left{
    text-align: left
}
.text-center{
    text-align: center
}
.text-right {
    text-align: right
}

通用flex布局样式定义

flex布局

// 主轴是水平方向
.d-flex{
    display: flex;
}
// 主轴是竖直方向
.flex-column{
    flex-direction: column;
}
.flex-1 {
    flex: 1
}
.flex-grow-1 {
    flex-grow: 1
}

主轴上面的排序方式

$flex-jc:(
    start: flex-start,
    end: flex-end,
    center: flex-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
    }
}

常用边距(margin,padding)

常用的边距属性,参考bootstrap里面类名的定义,大致有下面几种:

.m-0 {
    margin: 0rem;
}
.mx-0 {
    margin-left: 0rem;
    margin-right: 0rem
}
.mt-0 {
    margin-top: 0rem;
}

下面使用工具样式生成常用边距

首先定义边距的类型: 主要有margin和padding

$spacing-types: (m: margin, p: padding)

定义边距的方向: top、right、bottom、left

$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)

之后是使用定义的变量,动态生成常用的边距类(css)

@each $typeKey, $type in $spacing-types{
    // .m-1
    @each $sizeKey, $size in $spacing-sizes{
        .#{$typeKey}-#{$sizeKey} {
            #{$type}: $size * $spacing-base-size    
    	}
    }
	

    @each $sizeKey, $size in $spacing-sizes{
        // .mx-0,  .mx-1,  .mx-2 ...
        .#{typeKey}x-#{$sizeKey} {
            .#{$type}-left: $size * $spacing-base-size;
            .#{$type}-right: $size * $spacing-base-size;
        }

		// .my-0,  .my-1,   .my-2  ...
        .#{typeKey}y-#{$sizeKey} {
            .#{$type}-top: $size * $spacing-base-size; 
			.#{$type}-bottom: $size * $spacing-base-size;
        }
    }

	// .mt-1, .mr-1
    @each $directionKey, $direction in $spacing-directions{
        @each $sizeKey, $size in $spacing-sizes{
            // .mt-1{margin-top: 0.25rem}
            .#{$typeKey}#{$directionKey}-#{$sizeKey}{
                #{$type}-#{$direction}: $size * $spacing-base-size;
            }
        }
    }
}

栗子好好吃

发布了228 篇原创文章 · 获赞 41 · 访问量 5万+

私信关注