purpose of _base.sass?

Skip to first unread message


Jan 27, 2010, 6:11:58 PM1/27/10
to Compass
I'm trying to understand the purpose of partial file _base.sass.
I want to generate screen.css, handheld.css, and print.css files for a
project. How does _base.sass fit in?

Does each sass file (screen.sass, handheld.sass, and print.sass) need
it's own corresponding _base.sass partial? i.e., _base_screen.sass,
_base_handheld.sass, _base_print.sass?
The _base.sass examples on the wiki (and Susy's _base.sass) all seem
to define the number of grid columns and colors (and something other
things), which would need to be different for each of the 3 css files
I want to generate (well, screen and print might share the grid
layout, but they might not).

I guess from the name ("base") I was expecting to have styles that
would be a little more general. Would screen.sass would be a better
place to define the number of "screen columns", "screen colors",
etc.? Then handheld.sass could define a different layout, print.sass
could define a different set of colors, etc. In other words, I'm not
sure I like/understand having styles that depend on the media type be
defined in the _base.sass file. (But maybe I just don't understand
how _base.sass is supposed to be used.)

Having only thought about this briefly, here's how I might redo, say,
http://www.oddbird.net/susy/src/_base.sass (since it is a nice
complete example):
Leave only the "/* DEFAULTS" section in _base.sass -- move everything
else to screen.sass.
screen.sass would then look something like this: ("..." = style
definitions, omitted for brevity)

@import compass/reset.sass
//** GRID (override/set SUSY grid constants)
//** FONT-SIZE (override/set SUSY typography constants)
// SUSY - don't move this @import above the GRID and FONT-SIZE
@import susy/susy.sass
// COLORS (my constants)
// FONTS (my mixins)
/* @group my defaults -- needed because of reset.sass above */
@import base.sass

/* @group STRUCTURE */

Because all of the above are in the screen.sass file, it is then
obvious we defined the screen grid, screen colors, screen fonts/
typography, and the screen structure in that file.

print.sass and handheld.sass would have similar structures.
If there is any overlap between any two of the screen.sass,
print.sass, and handheld.sass files, additional partials could be
created (e.g., _screen_print_grid_base.sass?? if the same layout is
shared between print and screen).
Similarly, if all three use the same, say, fonts, then the FONTS
section could migrate back to the _base.sass file.

How are other people using compass to generate multiple CSS files for
different media types?
-- Mark

Andrew Vit

Jan 28, 2010, 3:57:18 PM1/28/10
to compas...@googlegroups.com
What you want in your _base.sass file is really up to you.

In your case if the columns are all different among your stylesheets then it doesn’t make sense to put them into a base file. But, there are probably common colors and other helpful bits that are shared among all your stylesheets, and this is what makes a base partial useful.

There’s nothing stopping you from creating separate partials like grids/_handheld.sass grids/_screen.sass if these are reusable, or else just put them right in your individual stylesheets as you describe.

I think the default that susy sets up is fine, but your site will have unique requirements so you’re free to reorganize it so it makes sense for what you need.

You might want to peek at the styles on Chris’ blog. He’s done a great job of organizing the styles into modular pieces. It will probably give you some ideas:

"Browse Styles" link in the footer shows the Sass files:

Andrew Vit

> --
> You received this message because you are subscribed to the Google Groups "Compass" group.
> To post to this group, send email to compas...@googlegroups.com.
> To unsubscribe from this group, send email to compass-user...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/compass-users?hl=en.

Reply all
Reply to author
0 new messages