3

我已经分别研究了 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;
}

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

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

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

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

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

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

4

1 回答 1

17

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

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

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 
    <div id="sidebar" class="column span-6">侧边栏内容</div>
    <div id="main" class="column span-12">主要内容</div>

结果与使用没有 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 
    <div id="sidebar">侧边栏内容</div>
    <div id="main">主要内容</div>

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

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

于 2011-02-10T18:37:49.853 回答