使用 Sass 时出错答案

【问题标题】：Error with using Sass使用 Sass 时出错
【发布时间】：2013-02-17 02:35:45
【问题描述】：

您好，我正在尝试在项目中使用 SASS，但遇到了一个问题，我想知道是否有人可以提供帮助？

我创建了两个样式表。一种称为defaults.scss，一种称为styles.scss。在 defaults.scss 我声明了以下内容：

$mainColor: #848484;

然后我尝试使用以下方法在我的 styles.scss 中调用 $mainColor：

nav ul { 
 list-style: none outside none;
 margin: 0; font-size: 1.2em;
 color: $mainColor; 
 padding: 50px 0 0 0; 
 font-weight: bold; 
 text-align: center;
}

但我收到以下错误消息：Syntax error: Undefined variable: "$mainColor".

谁能看到我做错了什么？我正在运行指南针。

谢谢。

【问题讨论】：

您正在将 defaults.scss 导入到 styles.scss 中？
在我的文档的头部我有以下内容： defaults.scss 是声明 $mainColor 的地方。 styles.scss 是我尝试替换颜色的地方。
见 sheriffderek 的回答。让 Compass 合并文件的另一个优点是浏览器只会发出一个请求，而不是 3 个。

标签： css sass compass-sass

【解决方案1】：

如果理解正确，您有两个 .scss 文件。我通常做的是有一个 styles.scss 并在该文件中导入所有其他 .scss 样式表。我认为他们称它们为局部或其他东西。这样您的主要 style.scss 将所有 .scss 文件一起编译到 .css 文件中。现在我不认为你的两个文件是相互了解的。您的主要样式.scss 应该看起来像这样：

@import "reset.scss";
@import "global.scss";
@import "structure.scss";
@import "colors.scss";
@import "etc.scss";

确保它们符合您的预期级联顺序 - 因为这就是它们将被混合在一起的方式。在您的情况下，先默认，然后再主。

当您开始添加媒体查询时也会变得棘手 - 但我认为这应该可以解决您的问题。

在您的 html 中，您只需调用整个操作输出的 .css 文件。

<link rel="stylesheet" href="css/style.css"> 或任何你想去的地方。只有一个。

【讨论】：

是的，styles.scss 不会知道任何关于该变量 ($mainColor) 的信息，除非您导入包含它的 scss 文件。
随意用那个可爱的绿色小复选标记来标记解决方案。我喜欢拿分！我真是个傻逼。
这就是它的工作原理。您投票赞成所有有用的帮助并标记已解决的问题，然后您基本上可以得到“积分”，您可以用这些积分来支付以后的困难答案。
提醒自己，不要花时间为声誉低于 50 岁的人回答问题。
@sheriffderek 我给了你一个赞成票 ;-) 另外，你的回答将来可能会对其他人有所帮助。