Last active
February 1, 2016 01:24
-
-
Save leowebguy/61ad682855098a9e8e14 to your computer and use it in GitHub Desktop.
Complete Sass mixin for Bootstrap 3 Projects > media queries, transitions, border-radius, box-shadow, rotate, scale, translate, skew, translate3d, opacity...
This file contains 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
/****************** | |
Sass Processor */ | |
@mixin processor($function, $params) { | |
-webkit-#{$function}: $params; | |
-moz-#{$function}: $params; | |
-ms-#{$function}: $params; | |
-o-#{$function}: $params; | |
#{$function}: $params; | |
} | |
@mixin transition($property: all, $duration: 0.3s, $timing: ease-in-out) { | |
@include processor(transition, $property $duration $timing); | |
} //@include transition(all 0.3s ease-in-out); | |
//linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit; | |
@mixin border-radius($params: 4px) { | |
@include processor(border-radius, $params); | |
} //@include border-radius(4px); | |
@mixin box-shadow($top: 2px, $left: 2px, $blur: 3px, $color: #ccc) { | |
@include processor(transition, $top $left $blur $color); | |
} //@include box-shadow(2px, 2px, 3px, #ccc); | |
@mixin rotate($method: rotate, $params: 15deg) { | |
@include processor(transform, $method($params)); | |
} //@include rotate(15deg); | |
@mixin scale($method: scale, $params: 2) { | |
@include processor(transform, $method($params)); | |
} //@include scale(2); | |
@mixin translate($method: translate, $x: 20px, $y: -20px) { | |
@include processor(transform, $method($x, $y)); | |
} //@include translate(20px, 20px); | |
@mixin skew($method: skew, $x: 15deg, $y: 15deg) { | |
@include processor(transform, $method($x, $y)); | |
} //@include skew(15deg, 15deg); | |
@mixin translate3d($method: translate3d, $x: 50px, $y: 50px, $z: 0px) { | |
@include processor(transform, $method($x, $y, $z)); | |
} //@include translate3d(50px, 50px, 0px); | |
/****************** | |
Specifics ******/ | |
@mixin opacity($params: 0.6) { | |
-khtml-opacity: $params; | |
-moz-opacity: $params; | |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$params * 100})"; | |
filter: alpha(opacity=$params * 100); | |
opacity: $params; | |
} //@include opacity(0.5); | |
@mixin font-smoothing($value: on) { | |
@if $value == on { | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
@else { | |
-webkit-font-smoothing: subpixel-antialiased; | |
-moz-osx-font-smoothing: auto; | |
} | |
} //@include font-smoothing(on); | |
@mixin linear-gradient($from, $to) { | |
background-color: $to; /* Fallback Color */ | |
background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to)); /* Saf4+, Chrome */ | |
background-image: -webkit-linear-gradient(top, $from, $to); /* Chrome 10+, Saf5.1+, iOS 5+ */ | |
background-image: -moz-linear-gradient(top, $from, $to); /* FF3.6 */ | |
background-image: -ms-linear-gradient(top, $from, $to); /* IE10 */ | |
background-image: -o-linear-gradient(top, $from, $to); /* Opera 11.10+ */ | |
background-image: linear-gradient(top, $from, $to); | |
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{$from}', EndColorStr='#{$to}'); | |
} //@include linear-gradient(#ccc, #555); | |
@mixin background-cover($url) { | |
background-image: url($url); | |
background-size: cover; | |
background-position: center center; | |
background-repeat: no-repeat; | |
/*@include media-max-767 { | |
background-image: url('#{$path}#{$bg-url}'); | |
background-position: top center; | |
}*/ | |
} //@include background-cover(img/background.jpg); | |
@mixin flex-align($align) { | |
display: -webkit-flex; | |
display: -ms-flexbox; | |
display: flex; | |
&, [class*="col-"] { | |
-ms-flex-align: $align; | |
-webkit-align-items: $align; | |
-webkit-box-align: $align; | |
align-items: $align; | |
} | |
@include media-max-767 { | |
display: block !important; | |
} | |
} //@include flex-align(center); | |
/****************** | |
Media Queries **/ | |
$screen-xxs: 480px; | |
$screen-sm: 768px; | |
$screen-md: 992px; | |
$screen-lg: 1200px; | |
/********** Extra small devices */ | |
@mixin media-max-479 { | |
@media (max-width: ($screen-xxs - 1)) { | |
@content; | |
} | |
} | |
@mixin media-min-480 { | |
@media (min-width: $screen-xxs) { | |
@content; | |
} | |
} | |
/********** Small devices */ | |
@mixin media-max-767 { | |
@media (max-width: ($screen-sm - 1)) { | |
@content; | |
} | |
} | |
@mixin media-min-768 { | |
@media (min-width: $screen-sm) { | |
@content; | |
} | |
} | |
/********** Medium devices */ | |
@mixin media-max-991 { | |
@media (max-width: ($screen-md - 1)) { | |
@content; | |
} | |
} | |
@mixin media-min-992 { | |
@media (min-width: $screen-md) { | |
@content; | |
} | |
} | |
/********** Large devices */ | |
@mixin media-max-1199 { | |
@media (max-width: ($screen-lg - 1)) { | |
@content; | |
} | |
} | |
@mixin media-min-1200 { | |
@media (min-width: $screen-lg) { | |
@content; | |
} | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment