-
-
Save tanepiper/2039373 to your computer and use it in GitHub Desktop.
SASS mixins for roundcorners
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Example of a whole load of mixins to make round corners | |
// (including individual corners) easy to remember in SASS | |
@mixin roundcorners($radius) { | |
-moz-border-radius: $radius; // firefox | |
-webkit-border-radius: $radius; // safari/chrome | |
border-radius: $radius; // CSS3, works in IE9 | |
} | |
@mixin roundcorner1($radius, $corner: "top-left") { | |
-moz-border-#{$corner}-radius: $radius ; // firefox | |
-webkit-border-#{$corner}-radius: $radius; // safari/chrome | |
border-#{$corner}-radius: $radius; // CSS3, works in IE9 | |
} | |
@mixin squarecorner1($corner: "top-left") { | |
@include roundcorner1(0px, $corner); | |
} | |
@mixin roundcornerTL($radius:5px) { @include roundcorner1($radius, "top-left"); } | |
@mixin roundcornerTR($radius:5px) { @include roundcorner1($radius, "top-right"); } | |
@mixin roundcornerBL($radius:5px) { @include roundcorner1($radius, "bottom-left"); } | |
@mixin roundcornerBR($radius:5px) { @include roundcorner1($radius, "bottom-right"); } | |
@mixin squarecornerTL() { @include roundcornerTL(0px); } | |
@mixin squarecornerTR() { @include roundcornerTR(0px); } | |
@mixin squarecornerBL() { @include roundcornerBL(0px); } | |
@mixin squarecornerBR() { @include roundcornerBR(0px); } | |
// Most simplistic application of above | |
.rounded { | |
@include roundcorners(5px); | |
} | |
.roundedTop { | |
@include roundcornerTL(5px); | |
@include roundcornerTR(5px); | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
this is not SASS. Maybe SCSS?