How To Apply Full CSS Reset on an Arbitrary Selector with Compass
30 May
Compass comes with a very handy utility for completely resetting the styling accross all browsers. In the author’s own words on the github wiki:
The Reset module provides mixins that allow you to reset your html so that every element has browser-supplied no styling
The default compass stylesheet comes with this module included, i.e. the @import compass/reset.sass you see at the top, and spits out the reset styles into the global namespace.
But, lets say you have a separate stylesheet that is to be included on a third party domain and that is namespaced under a selector. You can still take advantage of the Compass reset styling through the following method:
@import compass/utilities/general/reset.sass #hh +global-reset
The result is the complete resetting of every child element of your namespace, i.e:
...
#hh div, #hh span, #hh object, #hh iframe, #hh h1, #hh h2, #hh h3, #hh h4, #hh h5, #hh h6, #hh p,
#hh pre, #hh a, #hh abbr, #hh acronym, #hh address, #hh code, #hh del, #hh dfn, #hh em, #hh img,
#hh dl, #hh dt, #hh dd, #hh ol, #hh ul, #hh li, #hh fieldset, #hh form, #hh label, #hh legend, #hh caption, #hh tbody, #hh tfoot, #hh thead, #hh tr {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline; }
...
Recent Comments