SASS Mixins

/** * Description: Sass Mixins * Author: */ // 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.