轻松构建公有样式：Tailwind CSS 思想 + SCSS 实践

2023-12-27 19:32:46

前言

在前端开发中，样式代码的管理和维护一直是一个重要课题。随着项目规模的不断扩大，样式代码的数量也会随之增加，导致代码变得难以管理和维护，甚至出现 CSS 污染的情况。为了解决这一问题，Tailwind CSS 应运而生。

Tailwind CSS 是一种实用主义的 CSS 框架，它采用原子类的方式来构建样式代码。原子类是指那些只包含一个样式属性的 CSS 类，例如 .text-red-500 只包含 color 属性，.bg-blue-300 只包含 background-color 属性。通过组合这些原子类，我们可以轻松构建出复杂而美观的 UI 组件。

Tailwind CSS 的核心优势在于它的可重用性。由于原子类是独立且可重用的，因此我们可以将它们组合成各种不同的样式组合，而无需重复编写样式代码。这大大提高了开发效率，并减少了代码冗余。

使用 Tailwind CSS 的思想 + SCSS 手撸公有样式

虽然 Tailwind CSS 非常强大，但它也存在一些缺点。例如，它可能会增加项目的构建时间，并且对于微型项目来说，引入 Tailwind CSS 可能不太划算。因此，我们可以尝试使用 Tailwind CSS 的思想结合 SCSS 来手撸公有样式，从而在微型项目中轻松构建和使用公有样式。

1. 确定公有样式的范围

在开始构建公有样式之前，我们需要首先确定公有样式的范围。这包括需要包含哪些样式属性、哪些组件需要使用这些样式属性等。为了便于管理，我们可以将公有样式划分为不同的模块，例如基础样式、布局样式、表单样式、文本样式等。

2. 创建 SCSS 文件

接下来，我们需要创建一个 SCSS 文件来存储我们的公有样式。我们可以将这个文件命名为 _base.scss，并将其放在项目的根目录下。

3. 编写公有样式

在 _base.scss 文件中，我们可以使用 SCSS 的嵌套规则和 mixin 来编写我们的公有样式。例如，我们可以使用以下代码来定义基础字体样式：

$font-family: 'Arial', sans-serif;
$font-size: 16px;
$line-height: 1.5;

body {
  font-family: $font-family;
  font-size: $font-size;
  line-height: $line-height;
}

我们可以使用以下代码来定义按钮样式：

.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  color: #333;
  text-align: center;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    background-color: #f0f0f0;
  }
}