CSS 预处理器

Sass 和 SCSS

Sass 是一种强大的 CSS 预处理器，它扩展了 CSS 的功能，允许使用变量、嵌套规则、混合器（mixins）、函数等功能。Sass 有两种语法格式：Sass 和 SCSS。

Sass

Sass 使用缩进来表示嵌套关系，不使用大括号或分号。例如：

.container
  width: 100%
  .content
    padding: 20px

SCSS

SCSS 更接近于标准的 CSS 语法，使用大括号和分号。例如：

.container {
  width: 100%;
  .content {
    padding: 20px;
  }
}

使用 Sass 或 SCSS

在 Vite 中，可以通过安装 svelte-preprocess 来处理 Sass 文件。首先，安装所需的依赖包：

npm install sass --save-dev

接下来，在你的项目中创建一个 Sass 文件，比如 styles.scss：

$primary-color: #3498db;

body {
  background-color: $primary-color;
}

在组件中引入该文件：

<script>
  import './styles.scss';
</script>

<main>
  <h1>Hello, world!</h1>
</main>

Less

Less 是另一种流行的 CSS 预处理器，它提供了变量、嵌套规则、混合器等特性。Less 的语法与 SCSS 相似，但有一些细微差别。

安装 Less

你可以通过 npm 安装 Less：

npm install less --save-dev

使用 Less

在 Vite 中使用 Less，需要配置相应的插件。你可以使用 vite-plugin-less 插件：

npm install vite-plugin-less --save-dev

然后在 vite.config.js 中进行配置：

-- -------------------- ---- -------
------ - ------------ - ---- -------
------ ---- ---- -------------------

------ ------- --------------
  -------- -
    ------
      ------------ -
        ------------------ -----
      --
    ---
  --
---

创建一个 Less 文件，比如 styles.less：

@primary-color: #3498db;

body {
  background-color: @primary-color;
}

在组件中引入该文件：

<script>
  import './styles.less';
</script>

<main>
  <h1>Hello, world!</h1>
</main>

Stylus

Stylus 是另一种 CSS 预处理器，它支持嵌套、变量、运算符、函数等特性，并且语法更加灵活。

安装 Stylus

安装 Stylus 及其相关工具：

npm install stylus stylus-loader --save-dev

使用 Stylus

在 Vite 中使用 Stylus，需要配置相应的插件。你可以使用 vite-plugin-stylus 插件：

npm install vite-plugin-stylus --save-dev

然后在 vite.config.js 中进行配置：

import { defineConfig } from 'vite';
import stylus from 'vite-plugin-stylus';

export default defineConfig({
  plugins: [stylus()],
});

创建一个 Stylus 文件，比如 styles.styl：

$primary-color = #3498db

body
  background-color = $primary-color

在组件中引入该文件：

<script>
  import './styles.styl';
</script>

<main>
  <h1>Hello, world!</h1>
</main>

总结

本章介绍了三种流行的 CSS 预处理器：Sass、Less 和 Stylus。每种预处理器都有其独特的特性和用途，可以根据项目需求选择合适的预处理器。通过在 Vite 项目中配置相应的插件，可以轻松地将这些预处理器集成到项目中，提高 CSS 开发效率和可维护性。