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官网查看