How to organize import into Compass / Blueprint?

Question

I studied SASS and Blueprint separately and I think I understand how they work, and I installed the catalog of my project using the compass CLI tool, but I don’t understand how to organize my project correctly.

After initializing my project with

$ compass create my_project --using blueprint/semantic

... I was told to link the generated CSS files in my HTML with these lines

<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" />

... but where should I put my own application files .scssand how to include the corresponding drawing files?

It seems to me that I should not include generated print.cssand screen.cssdirectly in my HTML, but instead do something like:

@import "screen";

body {
    @include container;
}

... and then using only the file generated from the above in my HTML. Otherwise, why do we have such a line in screen.scss?:

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

mixins HTML.

, , , :

• HTML
• SCSS,
• SCSS, ,

, , .

Answer 1

"screen.scss" "print.scss" . , HTML, : , , . , , : "mobile.scss", HTML @media.

mixins HTML.

HTML. , SCSS: CSS HTML . mixins Sass.

SASS Blueprint

, Blueprint , Compass, , , Blueprint:

---

1. Blueprint HTML

, , /:

screen.scss

    @import "blueprint";

    // This outputs Blueprint 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 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>

, Blueprint Sass/Compass. HTML , style="width:120px" : .

---

2. Blueprint mixins :

screen.scss

    @import "blueprint";
    // Do not output Blueprint 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) - , , . , "", ; .