指南针:为什么我需要进行双重导入才能正常工作

Question

使用 Rails 3.2，compass-rails。

我有以下文件：

屏幕.css.scss

@import "compass";

应用程序.css.scss

/*
 *= require_self
 *= require_tree .
*/
@import "screen";
.content {
  background-color: #eee;
  padding: 20px;
  margin: 0 -20px; 
  @include border-radius(6px, 6px);
  @include box-shadow(0,0,0,.15);
}

application.html.erb（布局，只是相关行）：

<%= stylesheet_link_tag "application", :media => "all" %>

这适用于我的应用程序布局。

接下来，对于我尝试样式的特定页面（主页），我有 home.css.scss：

@import url(http://fonts.googleapis.com/css?family=Oleo+Script+Swash+Caps:700);
@import "compass/css3/text-shadow"; <<-- This is the line I don't understand
.welcome {
  text-align: center;
  h1 {
    font-family: 'Oleo Script Swash Caps', cursive;
    font-weight: 700;
    font-size: 110pt;
    line-height: 130px;
    @include single-text-shadow;
  }
 }

一旦我放下@import "compass/css3/text-shadow";，我的代码就会中断Undefined mixin 'single-text-shadow'.如果我将文本阴影导入行移动到应用程序中.css.css也会发生同样的事情。

我的问题是为什么？我已经通过screen.css.scss将整个指南针框架包含在应用程序中.css.css。该文件肯定会加载，因为我看到它可以工作。那么为什么我需要做这样的双重包含呢？

Answer 1

除非home.css.scss导入application.css.scss，否则这是有意义的预期行为。每个编译的文档只需导入一次，它将可用于该文档中包含的任何部件（并在代码导入之后）。

通常将 Compass 导入一次_base.scss部分（以及您想要使用的任何其他插件），然后将该部分导入到您需要基本设置的任何位置。

Answer 2

我不知道

我是否正确理解了你的问题，但这里没有双重导入。

指南针是一个模块化框架。 您不会被迫使用它的所有部件。 相反，您可以只包含所需的部分。 为简单起见，您还可以要求子部分，例如：

# application.sass
@import "compass"
@import "compass/css3/"
@import "compass/utilities/"