How To Apply Full CSS Reset on an Arbitrary Selector with Compass

30 May

compassCompass 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; }

...
blog comments powered by Disqus