SCSS Mixins

For Ruby projects (Rails or Sinatra), I’ve used HAML without SASS until they introduced SCSS. I did use SASS for a re-write project in 2009. But I felt that the syntax is strange and somehow I don’t mind the braces. It’s also easier to just copy CSS code onto a SCSS file. Of course some would say that I could just find and replace those braces, but ultimately it’s a matter of choice. I love those braces so I use SCSS. :)

SCSS Mixins

@mixin corner($size) {
  -moz-border-radius: $size;
  -webkit-border-radius: $size;
  -khtml-border-radius: $size;
   border-radius: $size;
}
@mixin imr {
  cursor: pointer;
  text-indent: -9999px;
  display:block;
  border: 0 none;
}

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

To use a mixin on an existing CSS class or ID, just use include.

#errorExplanation {
  border: 1px solid red; 
  padding:10px; 
  @include corner(6px);
}