从零开始构建 CSS 框架：调色篇

前言

在开始构建 CSS 框架之前，我们需要先为 UI 选择一些基本色调。这是整个框架的核心，因为当你改变一些基本配色之后，你会发现框架完全不同了。

配色方案

配色方案有很多种，但最常见的包括：

• 单色方案： 只使用一种颜色及其不同的色调和阴影。
• 互补色方案： 使用两种颜色，它们在色轮上彼此相对。
• 三色方案： 使用三种颜色，它们在色轮上均匀分布。
• 四色方案： 使用四种颜色，它们在色轮上呈矩形分布。

初始化项目

现在，我们已经了解了基本配色方案，就可以开始初始化我们的 Nodejs 项目了。

1. 打开终端，创建一个新的文件夹。
2. 在该文件夹中，运行以下命令：

npm init -y

这将创建一个新的 Nodejs 项目，并在该文件夹中生成一个名为 package.json 的文件。

3. 接下来，我们需要安装 parcel 打包工具。在终端中运行以下命令：

npm install -D parcel-bundler

这将把 parcel 安装到您的项目中。

SASS 简介

SASS 是一种 CSS 预处理器，它可以让你使用变量、嵌套规则和 mixin 等功能，让 CSS 代码更加简洁和可维护。

要开始使用 SASS，您需要在项目中创建一个新的 .scss 文件。在该文件中，您可以编写 SASS 代码。

例如，以下代码创建一个名为 "primary" 的变量，并将其设置为蓝色：

$primary: blue;

然后，您就可以在 CSS 代码中使用这个变量：

body {
  color: $primary;
}

这将把 body 元素的文本颜色设置为蓝色。

构建框架

现在，我们已经了解了 SASS 的基本语法，就可以开始构建自己的 CSS 框架了。

首先，我们需要创建一个新的 CSS 文件，并在其中包含 SASS 文件。例如，以下代码创建一个名为 "styles.css" 的文件，并包含 "main.scss" 文件：

<link rel="stylesheet" href="main.scss">

接下来，您就可以在 "main.scss" 文件中编写 CSS 代码了。例如，以下代码创建一个名为 "button" 的类，并将其样式设置为蓝色按钮：

.button {
  background-color: $primary;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

现在，您就可以在 HTML 代码中使用这个类了。例如，以下代码创建一个按钮，并将其样式设置为蓝色按钮：

<button class="button">Click me</button>

结语

本教程向您介绍了如何从零开始构建自己的 CSS 框架。我们从基本配色方案开始，然后介绍了 SASS 的基本语法。最后，我们指导您创建了自己的第一个 CSS 框架。