Skip to content

Instantly share code, notes, and snippets.

@tahaipek
Forked from christophergregory/_mixins.scss
Created September 21, 2017 20:21
Show Gist options
  • Save tahaipek/5ea3dfab6470b5324ea9b2c936028b9f to your computer and use it in GitHub Desktop.
Save tahaipek/5ea3dfab6470b5324ea9b2c936028b9f to your computer and use it in GitHub Desktop.
SASS: mixins
@mixin bgSprite($left: 0, $top: 0, $width: auto, $height: auto, $img: $sprite, $repeat: no-repeat) {
overflow: hidden;
width: $width;
height: $height;
background: transparent $img (0 - $left) (0 - $top) $repeat;
}
@mixin roundEachCorner($tl: 0, $tr: 0, $br: 0, $bl: 0) {
-webkit-border-top-left-radius: $tl;
-webkit-border-top-right-radius: $tr;
-webkit-border-bottom-right-radius: $br;
-webkit-border-bottom-left-radius: $bl;
-moz-border-radius: $tl $tr $br $bl;
border-radius: $tl $tr $br $bl;
}
@mixin roundAllCorners($r: 0) {
@include roundEachCorner($r, $r, $r, $r)
}
@mixin roundLeftCorners($r: 0) {
@include roundEachCorner($r, 0, 0, $r)
}
@mixin roundTopCorners($r: 0) {
@include roundEachCorner($r, $r, 0, 0)
}
@mixin roundRightCorners($r: 0) {
@include roundEachCorner(0, $r, $r, 0)
}
@mixin roundBottomCorners($r: 0) {
@include roundEachCorner(0, 0, $r, $r)
}
@mixin boxShadow($left: 0, $top: 0, $spread: 0, $color: #000) {
-webkit-box-shadow: $left $top $spread $color;
-moz-box-shadow: $left $top $spread $color;
box-shadow: $left $top $spread $color;
}
@mixin gradient($top_color: #000, $bottom_color: #fff, $top_color_stop: 0, $bottom_color_stop: 1) {
background: -webkit-gradient(linear, center top, center bottom, color-stop($top_color_stop, $top_color), color-stop($bottom_color_stop, $bottom_color));
background: -moz-linear-gradient(center top, $top_color, $bottom_color);
background: linear-gradient(center top, $top_color, $bottom_color);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='$top_color', endColorstr='$bottom_color');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#{$top_color}', endColorstr='#{$bottom_color}')";
}
@mixin opacity($val) {
-moz-opacity: $val;
-khtml-opacity: $val;
opacity: $val;
$val100: $val * 100;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$val100})";
filter: alpha(opacity=$val100);
}
@mixin rotate($deg: 45deg) {
-webkit-transform: rotate($deg);
-moz-transform: rotate($deg);
-ms-transform: rotate($deg);
-o-transform: rotate($deg);
transform: rotate($deg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment