SCSS 样式重置

声明

本文章参考B站UP主‘全栈之巅’[https://www.bilibili.com/video/av53994523?p=6
],如有侵权，联系删除。

SCSS

世界上最成熟、最稳定、最强大的专业级CSS扩展语言！
[scss]https://www.sass.hk/

样式重置

一般网站会进行根据设计稿进行初步的样式设计，避免浏览器对于一些元素的默认样式的干扰。

通用设置

* {
  box-sizing: border-box; // 这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中
  outline: none;
}

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

body {
  margin: 0; // 取消外边距 8px
  font-family: Arial, Helvetica, sans-serif; // 基础，苹果，非衬线字体
  line-height: 1.2rem; // 行高
  background: #f1f1f1; // 背景颜色灰色
}

变量

变量是区别于传统CSS样式的地方之一，可以将常用的样式加以复用，方便开发和维护

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

注：键值如有与原样式关键字重复，需添加引号以区分。建议都加引号

@each 循环

@each 循环与变量相结合，可以用极少代码实现一系列的样式

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

效果如下：

.text-primary {
  color: #db9e3f;
}

.bg-primary {
  background-color: #db9e3f;
}
...

注：- key：键（primary），var：值（#db9e3f）；

• .#{$key}, 固定格式，生成例如 text-primary
• color: $var,生成例如 color: #db9e3f

基础变量

$base-font-size: 1rem; // 基础字体大小

用处：可以更改基础字体，从而维护其他样式

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

@each $key, $var in $font-sizes {
  .fs-#{$key} {
    font-size: $var * $base-font-size
  }
}

效果如下：

.fs-xs {
  font-size: 0.7692rem;
}

.fs-sm {
  font-size: 0.9231rem;
}
...

注：本处的地方用到 vs code的插件px to rem，用法：

• 扩展（Ctrl+Shift+X）查找 px to rem；
• 设置（Ctrl+,）搜 px to rem,设置 Px-per-rem 为 13px
• 更改（Alt+Z）将选中px值改为rem值

参考样式

* {
  box-sizing: border-box; // 这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中
  outline: none;
}

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

body {
  margin: 0; // 取消外边距 8px
  font-family: Arial, Helvetica, sans-serif; // 基础，苹果，非衬线字体
  line-height: 1.2rem; // 行高
  background: #f1f1f1; // 背景颜色灰色
}

a {
  color: #999; // 标签颜色
}

// colors map类型
$colors: (
  'primary': #db9e3f,
  'white': #fff,
  'light': #f9f9f9,
  'grey': #999,
  'dark-1': #343440,
  'dark': #222,
  'black': #000,
);
// text-color bg-color
@each $key, $var in $colors {
  .text-#{$key} {
    color: $var;
  }
  .bg-#{$key} {
    background-color: $var
  }
}
// text-align
@each $var in (left, center, right) {
  .text-#{$var} {
    text-align: $var
  }
}

$base-font-size: 1rem;

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

@each $key, $var in $font-sizes {
  .fs-#{$key} {
    font-size: $var * $base-font-size
  }
}

// 水平布局
.d-flex {
  display: flex; // 显示为flex布局
}

// 垂直布局
.flex-column  {
  flex-direction: column
}

// 主轴对齐方式
$flex-jc: (
  'start': flex-start,
  'end': flex-end,
  'center': center,
  'between': space-between,
  'around': space-around
);

@each $key, $var in $flex-jc {
  .jc-#{$key} {
    justify-content: $var;
  }
}

// 交叉轴对齐方式
$flex-ai: (
  'start': flex-start,
  'end': flex-end,
  'center': center,
  'baseline': baseline,
  'stretch': stretch
);

@each $key, $var in $flex-ai {
  .ai-#{$key} {
    align-items: $var
  }
}

.flex-1 {
  flex: 1
}
// 占满剩余空间
.flex-grow-1 {
  flex-grow: 1;
}

// spacing
$spacing-types: (
   m: margin,
   p: padding
);
$spacing-directions: (
  t: top,
  b: bottom,
  l: left,
  r: right,
);
$spacing-base-size: 1rem;
$spacing-sizes: (
  0: 0,
  1: 0.25,
  2: 0.5,
  3: 1,
  4: 1.5,
  5: 3,
);

@each $typeKey,$type in $spacing-types {
  @each $sizeKey, $size  in $spacing-sizes {
    // m-1
    .#{$typeKey}-#{$sizeKey} {
      #{$type}: $size * $spacing-base-size
    }
    // mx-1
    .#{$typeKey}x-#{$sizeKey} {
      #{$type}-left: $size * $spacing-base-size;
      #{$type}-right: $size * $spacing-base-size;
    }
    // my-1
    .#{$typeKey}y-#{$sizeKey} {
      #{$type}-top: $size * $spacing-base-size;
      #{$type}-bottom: $size * $spacing-base-size;
    }
  }
  // mx-1
  @each $directionKey, $direction in $spacing-directions {
    @each $sizeKey, $size  in $spacing-sizes {
      .#{$typeKey}#{$directionKey}-#{$sizeKey} {
        #{$type}-#{$direction}: $size * $spacing-base-size
      }
    }
  }
}