问题背景
在使用 SASS 进行 CSS 开发时，有时会出现类似于下面的错误提示：
Error: Undefined mixin 'some-name'.
或者
Error: Undefined function 'some-name'.
这种情况通常是因为 SASS 编译器无法找到相应的 mixin 或 function，导致编译失败。
解决方法
1. 确认 mixin 或 function 是否被定义
在编写 SASS 代码时，我们需要自定义一些 mixin 或 function，或者使用第三方的 mixin 或 function，如果没有正确地定义或引入它们，就会出现上述错误。
因此，我们需要先确认出错的 mixin 或 function 是否被正确地定义或引入。有以下几种情况需要注意：
自定义 mixin 或 function
如果是自定义的 mixin 或 function，可以通过以下方式进行确认：
- 确认 mixin 或 function 的名称是否正确；
- 确认 mixin 或 function 是否位于正确的位置（例如，是否在正确的 .scss 文件中）；
- 确认 mixin 或 function 是否使用了正确的参数；
- 确认 mixin 或 function 是否被正确地调用，语法是否正确。
如果以上都无误，那么问题可能出现在 mixin 或 function 的实现中。
第三方 mixin 或 function
如果是使用第三方的 mixin 或 function，可以通过以下方式进行确认：
- 确认 mixin 或 function 的名称是否正确；
- 确认 mixin 或 function 是否被正确地引入；
- 确认 mixin 或 function 是否在正确的版本中存在。
如果以上都无误，那么问题可能出现在 mixin 或 function 的实现中，需要参考其文档或寻求支持。
2. 确认 SASS 版本是否正确
有时，我们会在项目中同时使用多个版本的 SASS，或者在多个项目之间切换，这时可能会出现 mixin 或 function 不存在的情况。
因此，需要确认我们所使用的 SASS 版本是否正确。可以通过以下方式进行确认：
- 输入命令
sass -v，确认当前所使用的 SASS 版本； - 确认项目中和引入的第三方库中使用的 SASS 版本是否一致；
- 如果需要在多个项目之间切换，可以使用
rbenv或nvm等工具，避免出现版本不一致的情况。
3. 确认 SASS 配置是否正确
有时，我们在使用 SASS 时需要配置一些选项，比如指定目标 CSS 文件的路径、开启 source map 等。如果配置不正确，也可能会导致 mixin 或 function 不存在的情况。
因此，需要确认我们的 SASS 配置是否正确。可以参考 SASS 官方文档进行配置，或者查看已有的配置是否存在问题。
4. 确认编译命令是否正确
在使用 SASS 进行编译时，我们需要使用编译命令来将 .scss 文件编译为 .css 文件。如果编译命令不正确，也可能会导致 mixin 或 function 不存在的情况。
因此，需要确认我们的编译命令是否正确。可以参考 SASS 官方文档进行配置，或者查看已有的命令是否存在问题。
示例代码
以下示例代码展示了一个自定义的 mixin，在 mixin 被正确定义、调用的情况下，编译不会出现错误。
-- -------------------- ---- ------- -- -- ----- ------ ---------------------- - -------------- -------- ------------------- -------- ---------------------- -------- - -- -- ----- ---- - ----------- ----- -------- -------------------- -
总结
在使用 SASS 进行 CSS 开发时，我们需要经常使用 mixin 和 function 进行样式的复用和封装。但如果出现 mixin 或 function 不存在的情况，可能会导致编译失败，影响开发进度。
解决这个问题需要我们进行仔细的排查，包括确认 mixin 或 function 是否被正确定义或引入、确认 SASS 版本和配置是否正确、确认编译命令是否正确等。只有在所有相关设置都正确的情况下，才能确保 mixin 和 function 的充分利用，提高 CSS 的复用性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e060f7f6b2d6eab3b74c6a