如何在 Sass 中使用 Catppuccin PaletteSCSS 色板导入的 2 种方式与避坑指南【免费下载链接】palette Soothing pastel theme to use within your projects!项目地址: https://gitcode.com/gh_mirrors/pal/paletteCatppuccin Palettenpm 包名catppuccin/palette是一套柔和治愈的粉彩色板提供Latte、Frappe、Macchiato、Mocha四种口味flavor每种口味包含 24 个精心调配的颜色变量。它原生内置 Sass/SCSS 支持只需一行use就能在你的项目中启用整套主题色告别手写色值。 如果你还在纠结深色主题到底用哪组颜色这篇文章会直接给你答案2 种导入方式 新手最容易踩的坑一次讲清。准备工作安装 Catppuccin Palette SCSS 色板SCSS 文件包含在 npm 包里无需 clone 仓库一条命令即可npm install catppuccin/palette 包内的文件结构来自发布脚本scripts/builders/npm/scss.ts的产物文件作用_latte.scss_frappe.scss_macchiato.scss_mocha.scss每种口味一个文件直接暴露 24 个颜色变量_catppuccin.scss汇总文件导出包含全部 4 种口味的$palette大 Map官方用法详见项目文档docs/sass.md纯 CSS 变量用法见docs/css.md。方式一按口味逐个导入最简单推荐新手只想要一种主题直接use对应口味文件即可编译后就是干净的 CSSuse mocha; .my-mocha-class { background: $base; /* 编译为 #1e1e2e */ color: $text; /* 编译为 #cdd6f4 */ }编译输出.my-mocha-class { background: #1e1e2e; color: #cdd6f4; } 每种口味的定位一目了然数据源见palette.jsonLatte —— 唯一浅色主题适合日间模式Frappe —— 最浅的暗色Macchiato —— 中间档Mocha —— 最深沉的暗色使用率最高⚠️ 注意use之后变量可直接使用无需前缀但如果你从 npm 包路径引入配合 webpack/Vite 的 loader要加~前缀use ~catppuccin/palette/scss/catppuccin/mocha;方式二导入单文件色板 Map一次生成 4 种口味如果需要在同一个组件里同时输出深浅色两套主题比如prefers-color-scheme切换就用汇总文件_catppuccin.scss它导出一个$paletteMapuse sass:map; use catppuccin; each $flavor, $color in catppuccin.$palette { .my-#{$flavor}-class { background: #{map.get($color, base)}; color: #{map.get($color, blue)}; } }循环一次就能批量生成.my-mocha-class、.my-macchiato-class、.my-frappe-class、.my-latte-class四个类名各自对应不同口味 —— 这是手写 CSS 变量都难以达到的效率。避坑指南新手最容易踩的 3 个坑坑 1blue、red、green必须加引号高频CSS 中red、green、blue、yellow等是内置的 web 安全颜色关键字。在map.get里不带引号写blueSass 会把它当成 CSS 关键字而非 Map 的 key导致取值失败/* ❌ 错误写法 */ background: #{map.get($color, blue)}; /* ✅ 正确写法颜色名用字符串 */ background: #{map.get($color, blue)};这是官方文档专门强调的坑务必把 Catppuccin 颜色名用包起来。坑 2从 npm 包引入时忘记~前缀如果你的构建工具webpack/Vite 等通过 node_modules 解析 SCSS路径要写成use ~catppuccin/palette/scss/catppuccin;漏掉~或路径层级不对是最常见的文件明明装了却找不到的报错来源。坑 3把$palette当成普通 Map 硬取方式二里的 Map 是两级嵌套$palette → 口味名 → 颜色 Map。不能直接map.get($palette, base)必须先按口味取内层 Map再取颜色如上面示例中的$color。层级搞混会直接报No $map given或取值为null。两种怎么选一张表说清场景推荐方式只用一种口味、追求简洁方式一use mocha需要深浅色主题同时输出方式二$paletteMap 循环项目已有 npm 构建链两种方式均可记得~前缀小结Catppuccin Palette用一行use即可在 Sass 中启用整套治愈系粉彩色板只取单口味 → 方式一批量生成四种口味 → 方式二记住三件事颜色名加引号、npm 路径加~、Map 是两级结构配好之后你的项目将同时拥有专业的配色体系与赏心悦目的视觉体验 ☕【免费下载链接】palette Soothing pastel theme to use within your projects!项目地址: https://gitcode.com/gh_mirrors/pal/palette创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何在 Sass 中使用 Catppuccin Palette：SCSS 色板导入的 2 种方式与避坑指南
如何在 Sass 中使用 Catppuccin PaletteSCSS 色板导入的 2 种方式与避坑指南【免费下载链接】palette Soothing pastel theme to use within your projects!项目地址: https://gitcode.com/gh_mirrors/pal/paletteCatppuccin Palettenpm 包名catppuccin/palette是一套柔和治愈的粉彩色板提供Latte、Frappe、Macchiato、Mocha四种口味flavor每种口味包含 24 个精心调配的颜色变量。它原生内置 Sass/SCSS 支持只需一行use就能在你的项目中启用整套主题色告别手写色值。 如果你还在纠结深色主题到底用哪组颜色这篇文章会直接给你答案2 种导入方式 新手最容易踩的坑一次讲清。准备工作安装 Catppuccin Palette SCSS 色板SCSS 文件包含在 npm 包里无需 clone 仓库一条命令即可npm install catppuccin/palette 包内的文件结构来自发布脚本scripts/builders/npm/scss.ts的产物文件作用_latte.scss_frappe.scss_macchiato.scss_mocha.scss每种口味一个文件直接暴露 24 个颜色变量_catppuccin.scss汇总文件导出包含全部 4 种口味的$palette大 Map官方用法详见项目文档docs/sass.md纯 CSS 变量用法见docs/css.md。方式一按口味逐个导入最简单推荐新手只想要一种主题直接use对应口味文件即可编译后就是干净的 CSSuse mocha; .my-mocha-class { background: $base; /* 编译为 #1e1e2e */ color: $text; /* 编译为 #cdd6f4 */ }编译输出.my-mocha-class { background: #1e1e2e; color: #cdd6f4; } 每种口味的定位一目了然数据源见palette.jsonLatte —— 唯一浅色主题适合日间模式Frappe —— 最浅的暗色Macchiato —— 中间档Mocha —— 最深沉的暗色使用率最高⚠️ 注意use之后变量可直接使用无需前缀但如果你从 npm 包路径引入配合 webpack/Vite 的 loader要加~前缀use ~catppuccin/palette/scss/catppuccin/mocha;方式二导入单文件色板 Map一次生成 4 种口味如果需要在同一个组件里同时输出深浅色两套主题比如prefers-color-scheme切换就用汇总文件_catppuccin.scss它导出一个$paletteMapuse sass:map; use catppuccin; each $flavor, $color in catppuccin.$palette { .my-#{$flavor}-class { background: #{map.get($color, base)}; color: #{map.get($color, blue)}; } }循环一次就能批量生成.my-mocha-class、.my-macchiato-class、.my-frappe-class、.my-latte-class四个类名各自对应不同口味 —— 这是手写 CSS 变量都难以达到的效率。避坑指南新手最容易踩的 3 个坑坑 1blue、red、green必须加引号高频CSS 中red、green、blue、yellow等是内置的 web 安全颜色关键字。在map.get里不带引号写blueSass 会把它当成 CSS 关键字而非 Map 的 key导致取值失败/* ❌ 错误写法 */ background: #{map.get($color, blue)}; /* ✅ 正确写法颜色名用字符串 */ background: #{map.get($color, blue)};这是官方文档专门强调的坑务必把 Catppuccin 颜色名用包起来。坑 2从 npm 包引入时忘记~前缀如果你的构建工具webpack/Vite 等通过 node_modules 解析 SCSS路径要写成use ~catppuccin/palette/scss/catppuccin;漏掉~或路径层级不对是最常见的文件明明装了却找不到的报错来源。坑 3把$palette当成普通 Map 硬取方式二里的 Map 是两级嵌套$palette → 口味名 → 颜色 Map。不能直接map.get($palette, base)必须先按口味取内层 Map再取颜色如上面示例中的$color。层级搞混会直接报No $map given或取值为null。两种怎么选一张表说清场景推荐方式只用一种口味、追求简洁方式一use mocha需要深浅色主题同时输出方式二$paletteMap 循环项目已有 npm 构建链两种方式均可记得~前缀小结Catppuccin Palette用一行use即可在 Sass 中启用整套治愈系粉彩色板只取单口味 → 方式一批量生成四种口味 → 方式二记住三件事颜色名加引号、npm 路径加~、Map 是两级结构配好之后你的项目将同时拥有专业的配色体系与赏心悦目的视觉体验 ☕【免费下载链接】palette Soothing pastel theme to use within your projects!项目地址: https://gitcode.com/gh_mirrors/pal/palette创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考