Friday, May 27, 2011

Sass Mixin For HTML5 classes and their obsolete HTML4 equivalents

This

@mixin back-compat($prefix) {
 
 @each $h5tag in 
  article,
  aside,
  audio,
  canvas,
  command,
  datalist,
  details,
  embed,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  keygen,
  mark,
  meter,
  nav,
  output,
  progress,
  rp,
  rt,
  ruby,
  section,
  source,
  summary,
  time,
  track,
  video,
  wbr
 {
   .#{$prefix}#{$h5tag} {
  @extend #{$h5tag}; 
   }
 }
}
sample usage

@include back-compat("html5-");
article, section, ruby
{
  COLOR:red;
}
Generates:

article, .html5-article, section, .html5-section, ruby, .html5-ruby {
  COLOR: red;
}
Nice nice....

No comments:

Post a Comment