How do I organize imports in Compass/Blueprint?

Tags: css,sass,blueprint-css,compass-sass

Problem :

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.

Solution :

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:

    @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; }
    <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:

    @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; }
    <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.

    CSS Howto..

    How to keep text in same position?

    How to display components horizontally with CSS

    How to Align a Link HTML/CSS

    How do I style a specific select option in HTML

    how to remove css property using javascript?

    how to align an 'a' element in html/css

    How can I float right two span tags on different lines?

    How can i spin an image -360 degrees and +360 degrees using the -webkit and jQuery?

    Dialogs are showing at the bottom of the page

    slideshow banner without using flash

    How to shift the alignment of text in a select dropdown toward the top and left with CSS?

    CSS - Superfish, how to float 4th level of dropdown

    How to position two blocks side by side with CSS

    How to combine the two same css selector into one?

    how to simulate mouse hover on image in css

    How to make input[type=text] to fill remaining horizontal space?

    How to target element inside iframe from css or javascript for styling

    CSS How to keep page centered, but still put stuff where I want

    How to apply css styling on rewards points notification email in opencart

    jQuery addClass based on how far scrolled

    How to import CSS from node_modules in webpack angular2 app

    How to apply gradient to the border of a div?

    How to transform Ruby hash to CSS rule?

    How to create color custom scrollbar in pure css? [closed]

    Gulp : How to copy multiple files and keep the folder structure

    How to remove a div with fade out effect in JavaScript?

    How do I deal with the issue of my divs being distorted greatly when zoomed in?

    How to have two elements with scrollbars next to each other?

    How can one fix a CSS3 graident background when using a box for content?

    can't find out how to create a css selector for yahoo stocks page