Showing posts with label Compass. Show all posts
Showing posts with label Compass. Show all posts

Tuesday, May 31, 2011

skipnav sass mixin

This is rewrite of excelent idea from
http://www.jimthatcher.com/skipnav.htm as Sass mixin.


/*
http://www.jimthatcher.com/skipnav.htm
<nav class="my-skipnav">
 <a href="#maincontent">Skip to main content</a>
 <a href="#sitemap">Skip to footer site map</a>
</nav>

Usage:
// using traditional class
.my-skipnav {
 @include  a11y-skipnav;
}
// or using structure selector
body>nav:first-child {
 @include  a11y-skipnav;
}
*/
@mixin a11y-skipnav {
 text-align: left;
 a {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;  
 } 
 a:focus, a:active {
  position: static;
  left: 0;
  width: auto;
  height: auto;
  overflow: visible;
 }
} 

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....