SCSS 实践：利用 SCSS 构建适合自己的全局样式库-六虎

一. 为什么要开发自己的大局款式库

在前端开发中，款式表（CSS）是至关重要的一部分。然而，当咱们面对复杂的项目时，常常会遇到编写重复款式的问题。这不只会导致代码冗余，还会影响开发功率和代码的可保护性。

为了解决这个问题，构建自己的大局款式库是一个非常好的解决方案。大局款式库能够供给一套通用的款式规范和组件，以及命名和结构的约定，使开发人员能够更快速、高效地编写款式。它不只能够进步开发的功率，还能保证项目中的款式共同性，并进步代码的可保护性。

我将选用 SCSS 来构建自己的款式库，SCSS 的优势有很多，想要提早了解更多的 SCSS 相关常识，请参考我之前的文章进行学习，本篇文章咱们直接来进行实践！

1. 揭开 SCSS 奥秘面纱：运用预处理器晋级你的款式表技能

2. SCSS 进阶之道：探究更多款式表达的可能性

经过学习以上的两篇文章，咱们应该了解了 SCSS 的基本语法功用，接下来能够进行开发了。

在本文中，咱们将一步步进行构建自己的大局款式库。咱们将从确定需求和方针开端，经过命名和结构的规范，循序渐进的编写合适项目的大局根底款式。

二. 确定需求和方针

在构建大局款式库之前，首要要明确需求和方针。考虑你的项目类型和主题，决议哪些款式是常用的，需求重复运用的。比方：通用款式、按钮款式、表单款式、文本款式等，保证你的大局款式库能够满意项目中大部分款式需求。

我将首要经过以下部分进行大局款式的开发：

主题色：type
字体巨细：size
页面宽度：width
内外边距：margin padding
圆角：radius
布局：flex float
定位：align、float、fixed
文字：定位、加粗、省掉等等
暗影：shadow
边框：border
徽标：badge

三. 规范命名和结构

为了编写可读性高、易于保护的大局款式库，需求遵循一套规范的命名和结构。能够配合语义化的类名来命名款式。

别的，能够将大局款式库依照功用或模块进行划分，将相关的款式安排在一起，使结构更明晰。

最重要的一点是，为了防止和项目中其他款式库、自界说款式命名产生抵触，能够统一带着一个自己独有的命名前缀，坚持自己款式库的独有性。例如：.a-，.u-，.is- 等等。

其次，除了命名前缀，对自己的款式称号也要有自己的规范和含义，能够经过简称来命名，例如：

margin-top -> mgt
padding-top -> pgt
background -> bg

四. 运用 Sass 混合器快速生成

以主题色为例，运用 Sass 混合器生成的基本思路如下：

1. 界说主题色变量

首要，你需求界说主题色的变量。能够依据你的规划需求，挑选一组主题色并为每个色彩设置一个变量，例如 $primary-color 等。

2. 创立混合器

接下来，你能够创立一个混合器来生成主题色的款式。混合器是 Sass 顶用来生成重复款式的东西。你能够运用 Sass 的 @mixin 要害字界说一个混合器，命名为 theme-color 或许其他你喜爱的称号。

在混合器中，你能够运用 Sass 的函数和操作符对色彩进行处理和核算。例如，你能够经过调整亮度、饱和度或许透明度来生成不同的主题色款式。

@mixin theme-color($color) {
  color: $color;
}

3. 运用混合器生成款式

在需求运用主题色的地方，你能够运用 @include 要害字引证混合器，并传入需求的主题色变量作为参数。

.is-primary {
  @include theme-color($primary-color);
}

在上述示例中，.button 类的元素将运用混合器生成的主题色款式。

4. 款式扩展（可选）

除了生成背景色和文本色之外，你还能够在混合器中增加其他款式特点，例如边框色、暗影作用等，以满意你的规划需求。

@mixin theme-color($color) {
  background-color: $color;
  color: mix($color, white, 30%);
  border: 1px solid darken($color, 10%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

经过以上基本思路，你能够运用 Sass 混合器来生成主题色的款式，进步款式的可保护性和复用性。一起，你还能够依据详细需求扩展混合器的功用，以满意更多的规划要求。记住在运用 Sass 编译器编译你的款式文件，以生成契合 CSS 规范的款式表。

五. 编写根底款式

根底款式是大局款式库中最重要的部分，它包含网页的通用款式，如布局、字体、色彩等。编写好根底款式能够保证整个项目的共同性。

运用 CSS 预处理器（如 Less、Sass 等）能够进步编写款式的功率和可保护性，界说一些大局变量、混合器或函数，以便在款式表中重复运用。

接下来我将选用 Sass 的形式开发一套款式表，首要能够运用一些大局变量、混合器等快速生成款式表，进步开发功率，一起也便于保护。终究也能够运用 Sass 指令生成规范的 css 款式，以供各种项目运用。

1. 几个大局变量

首要我界说了几个大局变量 $rate 和 $unit，以便于在运用 SCSS 运算时，能够直接运用这几个大局变量，基本上接下来生成款式的所有的操作都会运用这两个变量，下面解释一下是什么意思：

$rate：比率，表明放大倍数。

例如：is-mg-2 中界说的 margin 的缩放倍数

// $rate 为 1
.is-mg-2 {
  margin: 2px;
}
// $rate 为 2
.is-mg-2 {
  margin: 4px;
}

$unit：尺度单位。

界说值为 px 或 rpx。假如是小程序开发，则界说为 rpx，其他能够界说为 px，其实之后咱们也能够扩展为 rem、em 等。

rpx 是微信小程序开发中新出了尺度单位 rpx（responsive pixel）: 能够依据屏幕宽度进行自适应。规则屏幕宽度为 750rpx。

更多rpx常识请参考：微信小程序尺度单位

2. 主题色

用处：

主题色首要坚持网站的主色调及其其他各种首要的色彩共同，坚持规范性，也便于后期网站的换肤功用定制。首要包含主色调 primary、过错 error、警告 warning、提示 info、成功 success 等等

生成主题色进程：

界说主题色变量数组：首要，需求界说主题色的变量。能够依据你的规划需求，挑选一组主题色并为每个色彩设置一个变量，例如 primary, success，后边会生成 $is-primary、$is-success 等。
界说主题色色彩数组：色彩数组和变量数组一一对应，首要用户后边循环数组时，–对应赋值的操作，例如：primary 对应色彩 #2979ff
界说混合器生成款式：在需求运用主题色的地方，运用 @include 要害字引证混合器，并传入需求的主题色变量作为参数。
循环运用混合器生成主题色

代码如下所示：

/* 色彩 */
$type: "primary", "success" "error", "warning", , "info", "white";
$main: #2979ff, #19be6b, #fa3534, #ff9900, "#909399", #ffffff;
// 生成主题色 mixin 办法 .is-{$type}
@mixin add-type-color($type, $main) {
  .is-bg-#{$type} {
    background-color: $main;
  }
  .is-#{$type} {
    color: $main;
  }
}
@for $i from 1 through length($type) {
  @include add-type-color(nth($type, $i), nth($main, $i));
}

经过上面的办法，终究咱们会运用变量和混合器生成了咱们需求的主题色：.is-primary .is-bg-primary等等

生成的格局如下：

.is-primary {
  color: #2979ff;
}
.is-bg-primary {
  background-color: #2979ff;
}
.is-success {
  color: #19be6b;
}
.is-bg-success {
  background-color: #19be6b;
}

3. 字体巨细

用处：

首要用于文本元素的字体巨细，font-size

思路：

界说一个最小值$font-min、最大值$font-max、步长$font-step，运用 for 循环依照从最小值到最大值，依照每次循环步长递加重复履行代码块，终究生成咱们所需求的字体巨细。

代码如下所示：

// 字体
$font-min: 12;
$font-max: 40;
$font-step: 1;
$unit: px /*字体巨细*/ @for $i from $font-min through $font-max {
  @if $i % $font-step == 0 {
    .is-font-#{$i} {
      font-size: $i * $rate   $unit;
    }
  }
}

经过上面的办法，咱们将生成 font-size 从 12px 到 40px 的款式，每次递加 1px

生成的格局如下：

字体巨细： .is-font-14

// 百分比宽度
.is-font-14 {
  font-size: 14px;
}

4. 页面宽度

用处：

首要用于元素宽度的界说，width

思路：

界说一个最小值$width-min、最大值$width-max、步长$width-step，运用 for 循环依照从最小值到最大值，依照每次循环步长递加重复履行代码块，终究生成咱们所需求的宽度。

代码如下所示：

// 宽度
$width-min: 10;
$width-max: 100;
$width-step: 10;
/*页面宽度*/
@for $i from $width-min through $width-max {
  // 只需能被10除尽的数
  @if $i % $width-step == 0 {
    .is-width-#{$i} {
      width: $i   0%;
    }
    .is-width-#{$i}px {
      width: $i * $rate   $unit;
    }
  }
}

经过上面的办法，咱们将生成 width 从 10px 到 100px 的款式，一起咱们还生成了百分比的宽度巨细

生成的格局如下：

百分比宽度： .is-width-10
尺度宽度： .is-width-10px

// 百分比宽度
.is-width-10 {
  width: 10%;
}
// 尺度宽度
.is-width-10px {
  width: 10px;
}

5. 内外边距

用处：

首要用于元素内外边距，margin 和 padding，这两个是在咱们款式开发中常常运用的特点。

思路：

界说一个最小值$min、最大值$max，运用 for 循环依照从最小值到最大值，依照每次循环递加重复履行代码块，终究生成咱们所需求的内外边距款式。

代码如下所示：

$min: 1;
$max: 80;
// 界说内外边距
@for $i from $min through $max {
  // 只需双数和能被5除尽的数
  @if $i % 2 == 0 or $i % 5 == 0 {
    // 得出：is-mg-i
    .is-mg-#{$i} {
      margin: $i * $rate   $unit;
    }
    // 得出：is-mgtb-i
    .is-mgtb-#{$i} {
      margin-top: $i * $rate   $unit;
      margin-bottom: $i * $rate   $unit;
    }
    // 得出：is-mglr-i
    .is-mglr-#{$i} {
      margin-left: $i * $rate   $unit;
      margin-right: $i * $rate   $unit;
    }
    // 得出：is-pd-i
    .is-pd-#{$i} {
      padding: $i * $rate   $unit;
    }
    // 得出：is-pdtb-i
    .is-pdtb-#{$i} {
      padding-top: $i * $rate   $unit;
      padding-bottom: $i * $rate   $unit;
    }
    // 得出：is-pdlr-i
    .is-pdlr-#{$i} {
      padding-left: $i * $rate   $unit;
      padding-right: $i * $rate   $unit;
    }
    @each $short, $long in l left, t top, r right, b bottom {
      // 缩写版，结果如： is-mgl-i，is-pdl-i
      // 界说外边距
      .is-mg#{$short}-#{$i} {
        margin-#{$long}: $i * $rate   $unit;
      }
      // 界说内边距
      .is-pd#{$short}-#{$i} {
        padding-#{$long}: $i * $rate   $unit;
      }
    }
  }
}

生成的格局如下：

全外边距： .is-mg-5
上下外边距： .is-mgtb-5
左右外边距： .is-mglr-5
全内边距： .is-pd-5
上下内边距： .is-pdtb-5
左右内边距： .is-pdlr-5
上、下、左、右内边距： .is-pdt-5、.is-pdr-5、.is-pdb-5、.is-pdl-5
上、下、左、右外边距： .is-mgt-5、.is-mgr-5、.is-mgb-5、.is-mgl-5

// 全外边距
.is-mg-5 {
  margin 5px;
}
// 上下外边距
.is-mgtb-5 {
  margin: 5px 0;
}
// 左右外边距
.is-mglr-5 {
  margin: 0 5px;
}
// 全内边距
.is-pd-5 {
  padding 5px;
}
// 上下内边距
.is-pdtb-5 {
  padding: 5px 0;
}
// 左右内边距
.is-pdlr-5 {
  padding: 0 5px;
}

6. 圆角款式

用处：

首要用于元素圆角款式，比方按钮的圆角款式，运用的是border-radius。

思路：

界说一个最小值$radius-min、最大值$radius-max、步长$radius-step，运用 for 循环依照从最小值到最大值，依照每次循环步长递加重复履行代码块，终究生成咱们所需求的圆角款式。

代码如下所示：

// 圆角
$radius-min: 2;
$radius-max: 10;
$radius-step: 2;
/* 圆角 is-radius-1, is-radius-top-1 */
@for $i from $radius-min through $radius-max {
  @if $i % $radius-step == 0 {
    // 全圆角
    .is-radius-#{$i} {
      border-radius: $i   px;
    }
    // 上圆角
    .is-radius-top-#{$i} {
      border-top-left-radius: $i   px;
      border-top-right-radius: $i   px;
    }
    // 下圆角
    .is-radius-bottom-#{$i} {
      border-bottom-left-radius: $i   px;
      border-bottom-right-radius: $i   px;
    }
  }
}

生成的格局所示：

全圆角：.is-radius-2
上圆角：.is-radius-top-2
下圆角：.is-radius-bottom-2

// 全圆角
.is-radius-2 {
  border-radius: 2px;
}
// 上圆角
.is-radius-top-2 {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
// 下圆角
.is-radius-top-2 {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

7. 其他款式

布局：flex float
定位：align、float、fixed
文字：定位、加粗、省掉、几行展现
暗影：shadow
徽标：badge

譬如以上这些零零散散的款式，不合适批量生成，因而在开发项目的时候，需求咱们要自己多总结，多搜集，能够将其逐渐的归入自己的款式库中，如下所示：

/* 盒子模型 */
.is-box {
  box-sizing: border-box;
}
/* 布局 */
.is-flex {
  display: flex;
  flex-direction: row;
}
.is-block {
  display: block;
}
/* start--文本行数限制--start */
.is-line-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.is-line-2 {
  -webkit-line-clamp: 2;
}
/* 方位 定位 */
.is-floatr {
  float: right;
}
.is-absolute {
  position: absolute;
}
.is-relative {
  position: relative;
}
.is-fixed {
  position: fixed;
}
/* 含有暗影 */
.is-shadow {
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.05);
}
/* 含有边框 */
.is-border {
  border: 1px solid $is-border-color;
}
/* 徽标 */
.is-badge-border {
  border: 1px solid $is-border-color;
  padding: 6   $unit 6   $unit;
}

8. 转化成 CSS 款式

经过之前文章的说明， SCSS 是 CSS 的超集，但在运用 SCSS 之前需求将其编译为原生 CSS，才能在浏览器中正常运行。这一进程能够经过运用 Sass 编译器或其他构建东西来完结。

因而咱们在编写好 SCSS 款式后，能够将其转化成原生 CSS，注意：因为目前许多前端结构（如 Vue）等结构能够经过集成的方式实现内部编译，因而不用咱们来操作，咱们只考虑单独运用 CSS 文件的时候。

看下面如何进行转化：假如咱们编写的 SCSS 款式文件为 global.scss

在项目中安装 Sass

npm install sass -D

编译 SCSS 文件，使其转化成 CSS

sass --style compressed global.scss global.css

经过运行以上的指令，即可将 SCSS 编译成 CSS，如下图所示：

六. 实现款式重置和规范化

CSS 进行款式重置的首要原因是为了消除不同浏览器对页面元素的默认款式差异，使得页面在各种浏览器上能够呈现共同的外观。因为不同浏览器对元素的默认款式有所差异，有时会导致页面在不同浏览器上显示不共同，影响用户体会和开发功率。经过进行款式重置，能够将各种浏览器的默认款式统为共同的根底款式，然后更加灵敏地进行款式界说和页面布局。

常见的款式重置办法包含运用通用的款式重置方案（如 normalize.css、reset.css 等）或许自界说重置款式，以铲除各浏览器默认样对页面元素的影响。这样能够更好地掌控页面的外观和布局，进步开发功率，保证页面在不同浏览器上的共同性。

normalize.css

七. 总结

构建自己的大局款式库是一个值得投入时间和精力的进程，但它将为你的开发工作带来巨大的优点。经过削减冗余代码、进步开发功率和代码可保护性，大局款式库能够极大地简化开发流程，并保证整个项目的共同性。

可是要记住，每个项目都有自己的特点和需求，所以自己的大局款式库也需求灵敏地依据项目的实际情况进行调整和优化。不断学习和改善是构建大局款式库的要害，与其他开发者的沟通和共享也能够协助你不断进步。

最终，希望经过构建自己的大局款式库，你能够更高效地开发网站和运用，进步代码的可保护性，为用户供给更好的体会。

项目源码

本文章编写的源代码现已上传到 GitHub，包含 SCSS 和编译生成的 CSS，有感爱好的能够进行自取，假如对你有协助，请给个 Star、Fork。

GitHub 项目源码

创作不易，假如文章对你有协助，请帮助给个赞！

SCSS 实践：利用 SCSS 构建适合自己的全局样式库

一. 为什么要开发自己的大局款式库

二. 确定需求和方针

三. 规范命名和结构

四. 运用 Sass 混合器快速生成

1. 界说主题色变量

2. 创立混合器

3. 运用混合器生成款式

4. 款式扩展（可选）

五. 编写根底款式

1. 几个大局变量

2. 主题色

3. 字体巨细

4. 页面宽度

5. 内外边距

6. 圆角款式

7. 其他款式

8. 转化成 CSS 款式

六. 实现款式重置和规范化

七. 总结

项目源码

相关文章

适用于C++的REST风格 http请求客户端

pytorch 在 C++ 中加载 TORCHSCRIPT 模型

如何使用 Serverless Devs 部署静态网站到函数计算

使用 Github Actions 部署react-app 到 Github Pages

作者信息