/**
* Description: Sass Mixins
* Author: kim.petersend1@gmail.com
*/
// Border Radius
@mixin border-radius($radius: 4px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
// Box Shadow
@mixin box-shadow($hl:1px, $vl:1px, $blur:1px, $spread: 1px, $color: rgba(0,0,0,0.5)) {
-webkit-box-shadow: $hl $vl $blur $spread $color;
box-shadow: $hl $vl $blur $spread $color;
}
// Text Shadow
@mixin box-shadow($hl:1px, $vl:1px, $blur:1px, $shadow: rgba(0,0,0,0.5)) {
text-shadow: $hl $vl $blur $shadow;
}
// Transitions
@mixin Transitions($prop: all, $time: 0.3s, $type: ease, $delay: 0s) {
-webkit-transition: $prop $time $type $delay;
-moz-transition: $prop $time $type $delay;
-ms-transition: $prop $time $type $delay;
transition: $prop $time $type $delay;
}
// Translate
@mixin Translate($x: 0, $y: 0) {
-webkit-transform: translate($x,$y);
-moz-transform: translate($x,$y);
-ms-transform: translate($x,$y);
-o-transform: translate($x,$y);
transform: translate($x,$y);
}
// Background size
@mixin background-size($prop: cover) {
-webkit-background-size: $prop;
-moz-background-size: $prop;
-o-background-size: $prop;
background-size: $prop;
}
// Box Sizing
@mixin box-sizing($type: border-box) {
-webkit-box-sizing: $type;
-moz-box-sizing: $type;
box-sizing: $type;
}
/* Example
div {
width: 200px;
height: 200px;
@include border-radius;
}
* You can change the default values like this
div {
width: 200px;
height: 200px;
@include border-radius($radius: 10px);
}
* Changing more than one default value
* If there are 4 values e.g., you don't have change all of them. If you happen to change
2 values, the others will remain default
div {
width: 200px;
height: 200px;
@include Transitions($prop: width, $time: 0.5s);
}
/*
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.