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;
            }
        }
    }
}