I really like the idea of using sass mixins to handle the -moz and -
webkit prefixes for CSS3 features. But I can't get this example from
the website to work with recent versions of Firefox, Safari, or
Chrome:
@mixin rounded($side, $radius: 10px) {
border-#{$side}-radius: $radius;
-moz-border-radius-#{$side}: $radius;
-webkit-border-#{$side}-radius: $radius;
}
...
@include rounded(top);
It seems 'top' isn't a valid side. You need to do topleft and topright
(Mozilla) or top-left and top-right (Webkit, CSS3 spec). See
http://www.css3.info/preview/rounded-border/
So I came up with this variation that works for me (note I'm
using .sass format instead of .scss):
@mixin rounded($radius, $hside, $vside)
border-#{$hside}-#{$vside}-radius: $radius
-moz-border-radius-#{$hside}#{$vside}: $radius
-webkit-border-#{$hside}-#{$vside}-radius: $radius
@mixin roundedtop($radius)
@include rounded($radius, top, left)
@include rounded($radius, top, right)
--
You received this message because you are subscribed to the Google Groups
"Haml" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to [email protected].
For more options, visit this group at http://groups.google.com/group/haml?hl=en.
