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。

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

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

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

Answer 1

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

我无法在HTML中使用mixins。

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

我分别研究过SASS和蓝图

了解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）是一种优化，可让您将常见样式组合在一起，例如所有“列”元素都被定义为选择器列表;只有它们的不同宽度直接包含在每个元素中。

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

1 个答案:

1。在整个HTML

2。将Blueprint用作mixins到您自己的语义类名称中：