Written by Katherine Giron Pe
on
on
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);
}