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]

• Reset everything with this excruciatingly simple import.

  ​	​@import​ ​"compass/reset"​;

• Reset only some bits of the page like this.

  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.