Compass Core: Utilities Module

Check out the Utilities Demo to witness many of the Compass Utilities in action.

The Utilities Module provides a wealth of useful mixins to make common styling tasks easy. It also provides common tools to be shared by compass frameworks. You can import them selectively using the specific submodule or with one import command:

@import compass/utilities.sass

The utilities module does not generate any CSS, it only provides mixins.

General Utilities

The General Utilities Module is broken into several sub-modules. You can import them selectively or all at once with:

@import compass/utilities/general.sass

You can import any General Sub-Module with:

@import compass/utilities/general/[submodule].sass

Sub-Module	Mixin	Description
clearfix	+clearfix	Provides float clearing so that the bottom of an element containing floated elements falls below them. The strategy used can be found here.
float	+float-left	float:left with fix for double-margin bug
	+float-right	float:right with fix for double-margin bug
	+float(side)	alternate syntax for the above two
hacks	+has-layout	makes IE6 get layout (restores display to “block”)
	+bang-hack(property, hack_value, value)	uses the !important hack to set a different property value for IE6 and below
min	+min-height	cross browser min-height
	+min-width	cross browser min-width
reset	many mixins	see Reset Module documentation
tag_cloud	+tag-cloud([base_size])	Provides class names that adjust the font-sizes for a tag cloud.

Reset Utilities

The Reset Utilities are used by the Reset Module and can also be used to selectively reset a selector when you need to clear out previous styling. Note: you shouldn’t need to do this much. If you find you use selective resets frequently, you’re probably not scoping your selectors well enough. Resets only reset those styles that are defaulted by browsers. They don’t reset everything. You can import the Reset Utilities with:

@import compass/utilities/general/reset.sass

+reset	Base reset mixin – can be used to reset any element for which a more specific reset doesn’t exist
+reset-quotation	Resets blockquote and q tags
+reset-table-cell	Resets th, td and caption tags
+reset-table	Resets the table tag
+reset-body-tag	Reset the body tag

Link Utilities

The Link Utilities Module provides utilities for dealing with anchor links. It is broken into several sub-modules. You can import them selectively or all at once with:

@import compass/utilities/links.sass

You can import any Link Sub-Module with:

@import compass/utilities/links/[submodule].sass

Sub-Module	Mixin	Description
hover_link	+hover-link	Styles a link that only has an underline when you hover over it.
link_colors	+link-colors(normal[, hover, active, visited, focus])	Set all the colors for a link with one mixin call. Order of arguments is: normal, hover, active, visited, focus states not specified are left alone. Mixin like so: a +link-colors(#00c, #0cc, #c0c, #ccc, #cc0)
unstyled_link	+unstyled-link	A link that looks and acts like the text it is contained within.

List Utilities

The List Utilities Module provides utilities for dealing with ordered and unordered lists. It is broken into several sub-modules. You can import them selectively or all at once with:

@import compass/utilities/lists.sass

You can import any List Sub-Module with:

@import compass/utilities/lists/[submodule].sass

Sub-Module	Mixin	Description
bullets	+no-bullet	Turn off the bullet for an element of a list.
bullets	+no-bullets	Turn off all the bullets for a list.
bullets	+pretty-bullets(bullet_icon, width, height[, line_height, padding])	Makes a list use a background image for a bullet. It should be used like this for an icon that is 5×7: ul.pretty +pretty-bullets(/images/my-icon.png, 5px, 7px)
horizontal_list	+horizontal-list([padding])	A list that is laid out such that the elements are floated left and won’t wrap. This is not an inline list.
inline_list	+inline-list	Makes a list inline so that it will flow like normal text.
inline_list	+comma-delimited-list	Like an inline list, but with elements separated by commas. This will not work in all browsers. More info.

Table Utilities

The Table Utilities Module provides utilities for dealing with tables. It is broken into several sub-modules. You can import them selectively or all at once with:

@import compass/utilities/tables.sass

You can import any Table Sub-Module with:

@import compass/utilities/tables/[submodule].sass

Sub-Module	Mixin	Description
alternating_rows_and_columns	+alternating-rows-and-columns(even_row_color, odd_row_color, dark_intersection)	Sets background colors for a table so that rows and columns alternate and are shaded correctly. This requires that you annotate your table rows with .even or .odd and your columns with .even or .odd
scaffolding	+table-scaffolding	Sets some basic styles for the table’s cells and defines a .numeric class for them.
borders	+outer-table-borders([width, color])	Sets the borders for the outside of the table and the headers and footer.
borders	+inner-table-borders([width, color])	Sets the borders for the inside of the table.

Text Utilities

The Text Utilities Module provides utilities for dealing with text. It is broken into several sub-modules. You can import them selectively or all at once with:

@import compass/utilities/text.sass

You can import any Text Sub-Module with:

@import compass/utilities/text/[submodule].sass

Sub-Module	Mixin	Description
nowrap	+nowrap	Remembering whether or not there’s a hyphen in white-space is too hard.
replacement	+replace-text(img[, x, y])	Hides html text and replaces it with an image. If you use this on an inline element, you will need to also set the display to either block or inline-block.