如何在 Compass/Blueprint 中组织导入？

Question

我已经分别研究了 SASS 和 Blueprint，并且认为我了解它们是如何工作的，并且我已经使用 compass CLI 工具设置了我的项目目录，但我不知道组织我的项目的正确方法。

使用

$ compass create my_project --using blueprint/semantic

...初始化我的项目后，我被告知将 HTML 中生成的 CSS 文件与这些行链接起来

<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />

...但是我应该将自己的特定于应用程序的 .scss 文件放在哪里以及应该如何放置包括适当的蓝图文件？

在我看来，我不应该将生成的 print.css 和 screen.css 直接包含到我的 HTML 中，而是执行以下操作：

@import "screen";

body {
    @include container;
}

...然后使用 < em>仅在我的 HTML 中从上面生成的文件。否则为什么我们会在 screen.scss 中出现这样的一行？：

// Import all the default blueprint modules so that we can access their mixins.
@import "blueprint";

我不能在 HTML 中使用 mixin。

我发现这些文档非常模糊和矛盾，并且任何类型的简短示例说明了以下组合：

1. HTML
2. 从compass命令生成的
3. SCSS文件，上面包含特定于站点的样式的SCSS文件

将对我和其他人非常有帮助。

Answer 1

“screen.scss”和“print.scss”文件没什么神奇的。这些只是为输出提供的示例文件名，您可以从 HTML 链接这些文件名，但您不必这样做：只需删除它们并创建您自己的文件（如果您愿意），或者将您自己的样式添加到他们。这两个文件的目的是分开组织样式问题：您可以添加“mobile.scss”，然后在 HTML 中链接所有这些文件，或者将它们一起导入到 @media 块。

我无法在 HTML 中使用 mixins。

Mixin 不适用于您的 HTML。它们是用于编写 SCSS 源代码的有用技术：编译后的 CSS 输出或 HTML 对它们一无所知。您应该使用 mixin 来利用 Sass。

我分别研究了SASS和Blueprint

首先了解 Blueprint 类的作用很重要，但是当您使用 Compass 时，可以采用不同的方法来应用 Blueprint 等框架：

---

1. 在整个 HTML 中使用 Blueprint 的原始非语义类名称

这是不被认为是最佳实践，但它是一种入门方法，尤其是在线框/脚手架时：

screen.scss

    @import "blueprint";

    // This outputs Blueprint's classes into your stylesheet:
    @include blueprint;

    #sidebar { background: $blue; }
    #main { background: $yellow; }

screen.css (compiled)

    .column { float: ... }
    .span-6 { width: ... }
    .span-12 {width: ... }
    /* ...etc., all of Blueprint's classes ... */
    #sidebar { background: #ccf; }
    #main { background: #ffc; }

index.html

    <div id="sidebar" class="column span-6">sidebar content</div>
    <div id="main" class="column span-12">main content</div>

结果与使用不带 Sass/Compass 的蓝图相同。您的 HTML 将包含表示类，这实际上与在元素上使用 style="width:120px" 没有太大区别：它只是使用类来完成。

---

2. 使用 Blueprint 作为您自己的语义类名称中的混入：

screen.scss

    @import "blueprint";
    // Do not output Blueprint's classes into your stylesheet.
    // Instead, write your own classes and mixin the functionality:
    #sidebar {
      @extend .column;
      @include span(6);
      background: $blue; }
    #main {
      @extend .column;
      @include span(12);
      background: $yellow; }

screen.css (compiled)

    .column, #sidebar, #main { float: left; ... }
    #sidebar { width: 240px; background: #ccf; }
    #main { width: 480px; background: #ffc; }

index.html

    <div id="sidebar">sidebar content</div>
    <div id="main">main content</div>

如您所见，第二种方法将 Blueprint 的表示逻辑从 HTML 移出并移入样式表。

明智地使用@extend（而不是@include）是一种优化，可以让您将常见样式分组在一起，例如，所有“列”元素都被定义为选择器列表；只是它们的不同宽度直接包含在每个元素中。