Skip to content

Instantly share code, notes, and snippets.

@leowebguy
Last active February 1, 2016 01:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save leowebguy/61ad682855098a9e8e14 to your computer and use it in GitHub Desktop.
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...
/******************
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