SCSS Mixins

SCSS, Rails | comments

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);}