Skip to content

Instantly share code, notes, and snippets.

@DannyJoris
Created June 13, 2014 02:50
Show Gist options
  • Select an option

  • Save DannyJoris/3d28df7e12fda698ad10 to your computer and use it in GitHub Desktop.

Select an option

Save DannyJoris/3d28df7e12fda698ad10 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="element el1"></div>
<div class="element el2"></div>
// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----
// From: http://thesassway.com/intermediate/leveraging-sass-mixins-for-cleaner-code
// With keyword arguments, there's no need to preserve the order of the arguments
@mixin border-radius($radius: 5px, $moz: true, $webkit: true, $ms: true) {
@if $moz { -moz-border-radius: $radius; }
@if $webkit { -webkit-border-radius: $radius; }
@if $ms { -ms-border-radius: $radius; }
border-radius: $radius;
}
.element {
display: block;
max-width: 200px;
height: 50px;
background: hotpink;
margin: 5px;
}
.el1 {
@include border-radius(30% 10px, true, true, true);
}
.el2 {
@include border-radius($ms: false, $radius: 10px);
}
.element {
display: block;
max-width: 200px;
height: 50px;
background: hotpink;
margin: 5px;
}
.el1 {
-moz-border-radius: 30% 10px;
-webkit-border-radius: 30% 10px;
-ms-border-radius: 30% 10px;
border-radius: 30% 10px;
}
.el2 {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
<div class="element el1"></div>
<div class="element el2"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment