Compass樣式重置

1. 全局樣式重置

main.scss文件插入

@import "compass/reset";

對應的生成css爲

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

2. HTML5樣式重置

main.scss文件

@import "compass/reset/utilities";
@include reset-html5;

css爲

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

3. Compass文檔中其餘樣式重置

樣式重置混合器	做用
reset-box-model	移除元素的內外邊距和邊框
reset-font	重置文字的字號和基線
reset-focus	移除瀏覽器提供的輪廓線（好比Safari給<input>元素加上的那一圈線）
reset-table和reset-table-cell	重置表格的邊框和對齊方式
reset-quotation	爲<blockquotes>添加僅存在於樣式表中的雙引號

詳細內容請到compass官網查看