Skip to content

Instantly share code, notes, and snippets.

@metaskills
Last active December 12, 2015 09:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save metaskills/4751248 to your computer and use it in GitHub Desktop.
Save metaskills/4751248 to your computer and use it in GitHub Desktop.
Avoid universal selectors with a better box model in Sass/Compass.
// Inside my base include file which includes Compass.
%bs-border-box { @include box-sizing(border-box); }
// Inside my application Sass file.
@each $el in elements-of-type('block') { #{$el} { @extend %bs-border-box; } }
// Generates the following CSS.
address, article, aside, blockquote, center, dir, div, dd, details, dl, dt,
fieldset, figcaption, figure, form, footer, frameset, h1, h2, h3, h4, h5, h6,
hr, header, hgroup, isindex, menu, nav, noframes, noscript, ol, p, pre,
section, summary, ul {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@metaskills
Copy link
Author

Learn about box-sizing: border-box on Paul's blog post and then learn about Compass' elements-of-type function from their source code on github.

@metaskills
Copy link
Author

Also, learn about Sass silent classes, called placeholder selectors, on Dale's speakerdeck presentation.

Copy link

ghost commented Aug 11, 2014

Is there any advantage to this approach over using the * selector?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment