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

【问题标题】：How do I organize imports in Compass/Blueprint?如何在 Compass/Blueprint 中组织导入？
【发布时间】：2011-06-23 05:15:48
【问题描述】：

我已经分别研究过 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" />

...但是我应该把我自己的应用程序特定的.scssfiles 放在哪里，我应该如何包含适当的蓝图文件？

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

@import "screen";

body {
    @include container;
}

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

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

我不能在我的 HTML 中使用 mixins。

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

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

可能对我和其他人都非常有帮助。

【问题讨论】：

标签： css sass blueprint-css compass-sass

【解决方案1】：

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

我不能在我的 HTML 中使用 mixins。

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

我分别研究过SASS和Blueprint

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

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

这不是最佳实践，但它是一种入门方式，尤其是在制作线框/脚手架时：

屏幕.scss @import "蓝图"; // 这会将蓝图的类输出到您的样式表中： @include 蓝图； #sidebar { 背景：$蓝色； } #main { 背景：$黄色； } screen.css（已编译） .column { 浮动：... } .span-6 { 宽度：... } .span-12 {宽度：...} /* ...等等，所有蓝图的类... */ #sidebar { 背景：#ccf; } #main { 背景：#ffc; } 索引.html

主要内容

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

2。将蓝图用作您自己的语义类名称的混入：

屏幕.scss @import "蓝图"; // 不要将蓝图的类输出到您的样式表中。 // 相反，编写自己的类并混合功能： #边栏{ @extend .column; @包括跨度（6）；背景：$蓝色； } ＃主要的 { @extend .column; @包括跨度（12）；背景：$黄色； } screen.css（已编译） .column, #sidebar, #main { float: left; ... } #sidebar { 宽度：240px;背景：#ccf； } #main { 宽度：480px;背景：#ffc； } 索引.html

主要内容

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

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

【讨论】：