How do I organize imports in Compass/Blueprint?

Question

I have researched SASS and Blueprint seperately, and think I understand how they work, and I have set up my project directory using the compass CLI tool, but I am at a loss as to the correct way to organize my project.

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-specific .scssfiles and how should I include the appropriate blueprint files?

It seems to me that I should not be including the generated print.css and screen.css directly into my HTML but instead doing something like:

@import "screen";

body {
    @include container;
}

...and then using only the file generated from the above in my HTML. Otherwise why would we have a line like this in screen.scss?:

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

I can't use mixins in my HTML.

I'm finding the docs to be very vague and contradictory, and any sort of short example illustrating the combination of:

1. HTML
2. SCSS files generated from compass command above
3. SCSS files containing site-specific styling

would be very helpful for me and probably others.

Answer 1

The "screen.scss" and "print.scss" files are nothing magical. These are just example filenames given to the output which you can link from your HTML, but you don't have to: just delete them and create your own files if you prefer, or add your own styles to them. The intent with these 2 files is to keep the style concerns organized separately: you could add a "mobile.scss" and then link all these in your HTML, or import them together into one master file under @media blocks.

I can't use mixins in my HTML.

Mixins don't apply to your HTML. They are a helpful technique used for writing your SCSS source code: the compiled CSS output or the HTML doesn't know anything about them. You should be using mixins to take advantage of Sass.

I have researched SASS and Blueprint seperately

It's important to understand what the Blueprint classes do first, but when you use Compass there are different approaches for how you apply frameworks like Blueprint:

---

1. Use Blueprint's original non-semantic class names throughout your HTML

This is not considered best-practice, but it's a way to get started especially when wireframing/scaffolding:

screen.scss

    @import "blueprint";

    // This outputs Blueprint's classes into your stylesheet:
    @include blueprint;

    #sidebar { background: $blue; }
    #main { background: $yellow; }

screen.css (compiled)

    .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>

The result is the same as using Blueprint without Sass/Compass. Your HTML would contain the presentational classes, which are really not too different from just using style="width:120px" on your elements: it's just done using classes instead.

---

2. Use Blueprint as mixins into your own semantic class names:

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 (compiled)

    .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>

As you can see, the second method moves Blueprint's presentation logic out of the HTML and into the stylesheet.

The judicious use of @extend (instead of @include) is an optimization that lets you group common styles together, e.g. all the elements that are "columns" are defined once as a list of selectors; only their different widths are included directly into each element.