1

使用 Rails 3.2，指南针导轨。

我有以下文件：

屏幕.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;
  }
 }

一旦我 drop @import "compass/css3/text-shadow";，我的代码就会中断Undefined mixin 'single-text-shadow'.如果我将 text-shadow 导入行移动到 application.css.css 中，也会发生同样的事情。

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

4

2 回答 2

2

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

通常将 Compass 一次导入到_base.scss局部（以及您希望可用的任何其他插件）中，然后将该局部导入到您需要基本设置的任何地方。

于 2012-12-14T03:01:31.417 回答
0

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

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

# application.sass
@import "compass"
@import "compass/css3/"
@import "compass/utilities/"
于 2012-12-13T18:55:38.790 回答