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

Question

我分别研究了SASS和Blueprint,并且认为我理解它们是如何工作的,并且我使用罗盘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. 从罗盘命令生成的SCSS文件
3. 包含特定于站点的样式的SCSS文件

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

Answer 1

"screen.scss"和"print.scss"文件并不神奇.这些只是输出的示例文件名,您可以从HTML链接,但您不必:只删除它们并根据需要创建自己的文件,或者为它们添加自己的样式.这两个文件的目的是保持单独组织样式问题:您可以添加"mobile.scss",然后在HTML中链接所有这些,或者将它们一起导入到@media块下的一个主文件中.

我不能在HTML中使用mixins.

Mixins不适用于您的HTML.它们是用于编写SCSS源代码的有用技术:编译的CSS输出或HTML对它们一无所知.你应该使用mixins来利用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(已编译)

    .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的Blueprint相同.你的HTML将包含表示类,它们style="width:120px"与你的元素只使用它们并没有太大区别:它只是使用类来完成.

2.将Blueprint作为mixins用于您自己的语义类名称:

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(已编译)

    .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)是一种优化,它允许您将常见样式组合在一起,例如,所有"列"元素都被定义为选择器列表; 只有它们的不同宽度直接包含在每个元素中.