Skip to content

Instantly share code, notes, and snippets.

@SidIcarus
Last active August 29, 2015 14:17
Show Gist options
  • Save SidIcarus/6be4ee1893776e35a135 to your computer and use it in GitHub Desktop.
Save SidIcarus/6be4ee1893776e35a135 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<p class="qualifyClassname-p">
Hello. I am a p tag;
</p>
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
@mixin prefix($property, $value, $vendors: webkit ms) {
@if $vendors {
@each $vendor in $vendors {#{'-' + $vendor + '-' + $property}: #{$value}; }
}
#{$property}: #{$value};
}
@mixin background-clip($arg: padding-box) {
@include prefix(background-clip, $arg, webkit moz khtml);
}
@mixin border-radius-side($side, $value1, $value2: $value1) {
$sides:( top: 'top-left' 'top-right',
bottom: 'bottom-left' 'bottom-right',
left: 'top-left' 'bottom-left',
right: 'top-right' 'bottom-right');
$values: $value1, $value2;
@if(map-has-key($sides, $side)){
$sides: map-get($sides, $side);
@for $index from 1 through 2 {
$corner: 'border-#{nth($sides, $index)}-radius';
$value: nth($values, $index);
#{$corner}: $value;
}
@include background-clip;
} @else { @warn 'Unknown side: `#{$side}`' }
}
.border-top-radius { @include border-radius-side(top, 1px); }
.border-left-radius { @include border-radius-side(left, 2px, 3px); }
.border-bottom-radius { @include border-radius-side(bottom, 4px, 5px); }
.border-right-radius { @include border-radius-side(right, 6px); }
.border-top-radius {
border-top-left-radius: 1px;
border-top-right-radius: 1px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
-khtml-background-clip: padding-box;
background-clip: padding-box;
}
.border-left-radius {
border-top-left-radius: 2px;
border-bottom-left-radius: 3px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
-khtml-background-clip: padding-box;
background-clip: padding-box;
}
.border-bottom-radius {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 5px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
-khtml-background-clip: padding-box;
background-clip: padding-box;
}
.border-right-radius {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
-khtml-background-clip: padding-box;
background-clip: padding-box;
}
<p class="qualifyClassname-p">
Hello. I am a p tag;
</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment