Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

A designers most used function:

In SCSS I use a very simple mixin for rounded corners, something I use frequently when designing sites.

  @mixin radius($dist) {
    border-radius:$dist;
    -moz-border-radius:$dist;
    -webkit-border-radius:$dist;
    -khtml-border-radius:$dist;
    -webkit-background-clip:padding-box;
  }
Then in the class just add:

  @include radius(5px);


You might like this boilerplate SASS file that I made to handle a bunch of this type of thing: https://github.com/mgeraci/Sass-Boilerplate

I also see this post explaining the presence of the -webkit-background-clip (http://tumble.sneak.co.nz/post/928998513/fixing-the-backgrou...), but I don't see that behavior in Safari 5. Potentially fixed? If not, I would certainly add that to my boilerplate.


Shouldn't border-radius (i.e., no vendor prefix) be last?


Bourbon does this and much more : https://github.com/thoughtbot/bourbon




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: