Stylus import workflow

1 - grid.styl

// This is just the stylesheet from semantic.gs, with the body style removed

2 - main.styl

@import "grid"

// Make the site responsive
total-width: 100% 

// Any other site stylus variables will live here

// We will always import this styl file

3 - site.styl

@import "main" //import site variables, including semantic.gs
@import "lib/normalize.css"

// Main stylesheet, included on each page load

// Responsive hiding stuff taken from bootstrap goes here

body
  // body styles from semantic.gs placed here
  width: 100%
  clearfix()
  // site specific styles go here
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif

// Any other global site styles (think bootstrap's base.css, which you could also just import at the top directly)

4 - index.styl

// This is the style for the index page, which we can load dynaically via backbone/require

@import "main"

#some-element
  column(8) //use some grid system goodness
  background-color: red

#another-element
  column(4)
  background-color: blue