Question

使用Rails 3.2，compass-rails。

我有以下文件：

screen.css.scss

@import "compass";

application.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'.如果我将text-shadow导入行移动到application.css.css中，就会发生同样的事情。

我的问题是为什么？我已经通过screen.css.scss在application.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/"

指南针：为什么我需要进行双重导入才能工作？

2 个答案: