26 | Resetting: Much Easier with Compass |
Compass comes with a really handy and super-robust reset style sheet built in. The advantage of using it is that it is far more complete than Eric Meyer’s original reset CSS—and it includes a lot more browser tweaks. Plus, since Compass is a collection of libraries, we don’t actually have to keep a file around anymore. This keeps our code a lot cleaner.
There are two types of reset. The first is global reset, which resets all the CSS. All you have to type is @import "compass/reset";. Most imports in Compass don’t actually cause any styles to get printed in your style sheet, but this is a special case and it happens automatically. The CSS rendered is pretty much the same as the one we previously saw in Task 14, Resetting CSS.
But say you don’t want to reset all the CSS. Compass can help! Compass has several different reset mixins that you can use in your project if you only want to reset certain parts of the page. This is called a nested reset. Look on the opposite page for an example of a nested reset.[9]
What To Do... |
| @import "compass/reset"; |
compass/reset.scss | |
| @import "compass/reset/utilities"; |
| |
| body { |
| .sidebar { |
| @include nested-reset; } } |
This compiles to:
| body .sidebar div, body .sidebar span, body .sidebar ... |
| body .sidebar h1, body .sidebar h2, body .sidebar h3, body ... |
| body .sidebar a, body .sidebar abbr, body .sidebar acronym, ... |
| body .sidebar del, body .sidebar dfn, body .sidebar em, ... |
| body .sidebar small, body .sidebar strike, body .sidebar ... |
| body .sidebar b, body .sidebar u, body .sidebar i, body ... |
| body .sidebar dl, body .sidebar dt, body .sidebar dd, body ... |
| body .sidebar fieldset, body .sidebar form, body .sidebar ... |
| body .sidebar table, body .sidebar caption, body .sidebar ... |
| body .sidebar article, body .sidebar aside, body .sidebar ... |
| body .sidebar figure, body .sidebar figcaption, body ... |
| body .sidebar menu, body .sidebar nav, body .sidebar ... |
| body .sidebar time, body .sidebar mark, body .sidebar ... { |
| margin: 0; |
| padding: 0; |
| border: 0; |
| font-size: 100%; |
| font: inherit; |
| vertical-align: baseline; } |
| body .sidebar table { |
| border-collapse: collapse; |
| border-spacing: 0; } |
| body .sidebar caption, body .sidebar th, body .sidebar td { |
| text-align: left; |
| font-weight: normal; |
| vertical-align: middle; } |
| body .sidebar q, body .sidebar blockquote { |
| quotes: none; } |
| body .sidebar q:before, body .sidebar q:after, body ... { |
| content: ""; |
| content: none; } |
| body .sidebar a img { |
| border: none; } |
The ellipses signify lines of code that are too long for the page.