如何使用True快速搭建Sass测试环境？5分钟入门指南

如何使用True快速搭建Sass测试环境？5分钟入门指南

【免费下载链接】trueSass unit tests项目地址: https://gitcode.com/gh_mirrors/tr/true

True是一款专为Sass打造的单元测试工具，能够帮助开发者在部署前验证Sass代码的准确性。本文将带你快速掌握True的安装配置与基础使用方法，轻松构建专业的Sass测试环境。

📦 3步完成True安装配置

1. 安装True核心包

通过npm快速安装True到开发依赖：

npm install --save-dev sass-true

2. 配置Dart Sass环境

True需要Dart Sass v1.45.0或更高版本支持，执行以下命令安装：

npm install --save-dev sass-embedded # 或使用官方`sass`包

3. 导入True到测试文件

根据项目环境选择合适的导入方式：

使用Node.js包导入器：

@use 'pkg:sass-true' as *;

使用JavaScript测试运行器：

@use 'true' as *;

传统相对路径导入：

// 路径需根据项目结构调整 @use '../node_modules/sass-true' as *;

✨ 基础测试语法快速上手

True采用类JavaScript测试框架的语法风格，让Sass测试更易上手。

测试Sass值（函数与变量）

使用describe和it块组织测试，通过assert-equal验证结果：

@include describe('Zip [function]') { @include it('Zips multiple lists into a single multi-dimensional list') { @include assert-equal(zip(a b c, 1 2 3), (a 1, b 2, c 3)); } }

测试CSS输出（混合宏）

通过assert块配合output和expect验证CSS输出：

@include it('Outputs font size and line height based on keyword') { @include assert { @include output { @include font-size('large'); } @include expect { font-size: 2rem; line-height: 3rem; } } }

🚀 集成JavaScript测试运行器

快速配置步骤

1. 创建Sass测试文件（如test/test.scss）
2. 编写JavaScript测试垫片（如test/sass.test.js）：

import path from 'node:path'; import { fileURLToPath } from 'node:url'; import sassTrue from 'sass-true'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); const sassFile = path.join(__dirname, 'test.scss'); sassTrue.runSass({ describe, it }, sassFile);

3. 通过测试运行器执行（Mocha/Jest/Vitest）

启用Sass文件监听模式

Vitest配置（vitest.config.js）：

module.exports = defineConfig({ test: { forceRerunTriggers: ['**/*.scss'], }, });

Jest配置（jest.config.js）：

module.exports = { moduleFileExtensions: ['js', 'json', 'scss'], };

⚙️ 高级配置选项

True提供$terminal-output配置变量控制输出行为：

• true（默认）：显示详细终端输出，适合独立Sass编译
• false：禁用Sass终端输出，适合与JavaScript测试运行器配合使用

如需使用传统@import语法，可导入 legacy 路径：

@import '../node_modules/sass-true/sass/true'; // 变量名为 $true-terminal-output

📝 生成测试报告

在测试文件末尾添加报告指令，即可在CSS输出和终端显示测试摘要：

@include report;

通过以上步骤，你已成功搭建起Sass测试环境。True的模块化设计让测试组织更加灵活，无论是简单的函数测试还是复杂的CSS输出验证，都能轻松应对。开始使用True，让你的Sass代码更加健壮可靠！

完整API文档和进阶指南可参考项目内的使用说明文件，更多测试示例可查看项目中的test/scss目录。

【免费下载链接】trueSass unit tests项目地址: https://gitcode.com/gh_mirrors/tr/true