├── README.md ├── mixins.less └── mixins.scss /README.md: -------------------------------------------------------------------------------- 1 | SASS and LESS Mixins 2 | =========== 3 | 4 | Preset mixins to help speed up web development. Provides **cross-browser compatibility** with things like: 5 | 6 | - Rounded Corners 7 | - Opacity 8 | - Box Shadow 9 | - Box Shadow (Inset) 10 | - Gradient (Horizontal) 11 | - Gradient (Vertical) 12 | - CSS3 Transition 13 | - CSS3 Transforms 14 | 15 | These will automatically create browser-specific rules to accommodate multiple browsers. For example, the `.border-radius(4px)` mixin will create: 16 | 17 | > 18 | border-radius : 4px; 19 | -moz-border-radius : 4px; 20 | -webkit-border-radius : 4px; 21 | 22 | * These instructions are for the LESS version. The SASS syntax is a little different, but will have the same results. Check out the [SASS Website](http://sass-lang.com/) for their syntax. 23 | 24 | Requirements 25 | ------------ 26 | 27 | - [jQuery](http://jquery.com/) 28 | - [LESS](http://lesscss.org/) 29 | 30 | Installation 31 | ------------ 32 | 33 | - Include jQuery and LESS 34 | 35 | > 36 | 37 | 38 | 39 | - Include `mixins.less` in the head of your document. 40 | 41 | > 42 | 43 | 44 | * Alternatively, you can import the mixins.less into the stylesheet you want. At the beginning of your LESS file, use: 45 | 46 | `@import "mixins";` 47 | 48 | Usage 49 | ------------ 50 | 51 | ### Rounded Corners ### 52 | Set the border radius. Accepts pixels or percentages. 53 | 54 | Have a border radius all around: `.border-radius(5px);` 55 | 56 | Create a circle: `.border-radius(50%);` 57 | 58 | ### Opacity ### 59 | Set the opacity of any element. This will set the opacity of the element plus its children. For just setting the opacity of a background, look at Background Opacity 60 | 61 | `.opacity(0.5);` 62 | 63 | ### Background Alpha ### 64 | Creates a transparent background. The contents of the element will stay at normal capacity. 65 | 66 | `.background-alpha(#000, 0.5);` 67 | 68 | ### Box Shadow ### 69 | Create a box shadow. Accepts 4 options: `.box-shadow(@x-size, @y-size, @blur, @color, @spread);` 70 | 71 | `.box-shadow(2px, 2px, 5px, #333, 0px);` 72 | 73 | ### Box Shadow (Inset) ### 74 | Create an inner box shadow. Accepts 4 options: `.box-shadow(@x-size, @y-size, @blur, @color, @spread);` 75 | 76 | `.box-shadow-inset(2px, 2px, 5px, #333, 0px);` 77 | 78 | ### Gradient (Horizontal) ### 79 | Create a horizontal gradient. Accepts 2 colors: `.gradient-horizontal(#FFF, #E7E7E7);` 80 | 81 | ### Gradient (Vertical) ### 82 | Create a vertical gradient. Accepts 2 colors: `.gradient-vertical(#FFF, #E7E7E7);` 83 | 84 | ### CSS3 Transition ### 85 | Applies a CSS3 transition to an element. This will be used to transition CSS effects like :hover. 86 | 87 | `.transition(@type, @time, @ease);` 88 | `.transition(all, 5s, ease-in-out);` 89 | 90 | ### CSS3 Transforms ### 91 | This includes the simple CSS3 transforms. I'm currently working on a CSS3 animation library to help speed up CSS3 animations. Coming soon... 92 | 93 | These transforms include: 94 | - `.transform(@deg);` 95 | - `.scale(@multiplier);` 96 | - `.rotate(@deg);` 97 | - `.skew(@deg, @deg2);` 98 | 99 | These can be used on :hover actions to create cool effects. 100 | -------------------------------------------------------------------------------- /mixins.less: -------------------------------------------------------------------------------- 1 | /* Rounded Corners 2 | ----------------------------------------------------------------------------- */ 3 | .border-radius (@radius: 4px) { 4 | border-radius : @radius; 5 | -moz-border-radius : @radius; 6 | -webkit-border-radius : @radius; 7 | } 8 | .border-radius-all (@topleft: 4px, @topright: 4px, @bottomright: 4px, @bottomleft: 4px) { 9 | border-radius : @topleft @topright @bottomright @bottomleft; 10 | -moz-border-radius : @topleft @topright @bottomright @bottomleft; 11 | -ms-border-radius : @topleft @topright @bottomright @bottomleft; 12 | -o-border-radius : @topleft @topright @bottomright @bottomleft; 13 | -webkit-border-radius : @topleft @topright @bottomright @bottomleft; 14 | } 15 | 16 | /* Opacity 17 | ----------------------------------------------------------------------------- */ 18 | .opacity (@opacity: 0.5) { 19 | @ieOpacity : @opacity * 100; 20 | opacity : @opacity; 21 | -moz-opacity : @opacity; 22 | -webkit-opacity : opacity; 23 | -ms-filter : ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{ieOpacity})"; /* IE 8 */ 24 | filter : ~"alpha(opacity = @{ieOpacity})"; /* IE 5-7 */ 25 | } 26 | 27 | /* Background RGBA 28 | ----------------------------------------------------------------------------- */ 29 | .background-alpha(@color, @alpha) { 30 | @acolor : hsla(hue(@color), saturation(@color), lightness(@color), @alpha); 31 | @iecolor : argb(@acolor); 32 | 33 | background-color : @color; /* fallback color */ 34 | background-color : @acolor; 35 | 36 | /* IE */ 37 | background-color : transparent\9; 38 | filter : ~"progid:DXImageTransform.Microsoft.gradient(startColorstr= @{iecolor}, endColorstr= @{iecolor})"; 39 | zoom:1; 40 | } 41 | 42 | /* Box Shadow 43 | ----------------------------------------------------------------------------- */ 44 | .box-shadow (@x-size:10px, @y-size:10px, @blur:5px, @color: @black, @spread:0) { 45 | box-shadow : @x-size @y-size @blur @spread @color; 46 | -moz-box-shadow : @x-size @y-size @blur @spread @color; 47 | -webkit-box-shadow : @x-size @y-size @blur @spread @color; 48 | } 49 | .box-shadow-inset (@x-size: 10px, @y-size: 10px, @blur: 5px, @color: @black, @spread:0) { 50 | box-shadow : inset @x-size @y-size @blur @spread @color; 51 | -moz-box-shadow : inset @x-size @y-size @blur @spread @color; 52 | -webkit-box-shadow : inset @x-size @y-size @blur @spread @color; 53 | } 54 | 55 | /* Gradients 56 | ----------------------------------------------------------------------------- */ 57 | .gradient-vertical (@firstColor: #FFF, @secondColor: #DDD) { 58 | background : @firstColor; /* Fallback solid color for old browsers */ 59 | background : linear-gradient(to bottom, @firstColor 0%, @secondColor 100%); /* W3C */ 60 | background : -moz-linear-gradient(top, @firstColor 0%, @secondColor 100%); /* FF 3.6+ */ 61 | background : -ms-linear-gradient(top, @firstColor 0%, @secondColor 100%); /* IE 10+ */ 62 | background : -o-linear-gradient(top, @firstColor 0%, @secondColor 100%); /* Opera 11.10+ */ 63 | background : -webkit-linear-gradient(top, @firstColor 0%,@secondColor 100%); /* Chrome 10+, Safari 5.1+ */ 64 | background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,@firstColor), color-stop(100%,@secondColor)); /* Chrome, Safari 4+ */ 65 | filter : ~"progid:DXImageTransform.Microsoft.gradient(startColorstr= '@{firstColor}', endColorstr= '@{secondColor}', GradientType=0)"; /* IE 6-9 */ 66 | } 67 | 68 | .gradient-horizontal (@firstColor: #FFF, @secondColor: #DDD) { 69 | background : @firstColor; /* Fallback solid color for old browsers */ 70 | background : linear-gradient(to right, @firstColor 0%, @secondColor 100%); /* W3C */ 71 | background : -moz-linear-gradient(left, @firstColor 0%, @secondColor 100%); /* FF 3.6+ */ 72 | background : -ms-linear-gradient(left, @firstColor 0%, @secondColor 100%); /* IE 10+ */ 73 | background : -o-linear-gradient(left, @firstColor 0%, @secondColor 100%); /* Opera 11.10+ */ 74 | background : -webkit-linear-gradient(left, @firstColor 0%,@secondColor 100%); /* Chrome 10+, Safari 5.1+ */ 75 | background : -webkit-gradient(linear, left top, right top, color-stop(0%,@firstColor), color-stop(100%,@secondColor)); /* Chrome, Safari 4+ */ 76 | filter : ~"progid:DXImageTransform.Microsoft.gradient(startColorstr= '@{firstColor}', endColorstr= '@{secondColor}', GradientType=1)"; /* IE 6-9 */ 77 | } 78 | 79 | /* Transition 80 | ----------------------------------------------------------------------------- */ 81 | .transition (@type:all, @time:0.2s, @ease:ease) { 82 | transition : @type @time @ease; 83 | -moz-transition : @type @time @ease; 84 | -webkit-transition : @type @time @ease; 85 | -o-transition : @type @time @ease; 86 | } 87 | 88 | /* Animations 89 | ----------------------------------------------------------------------------- */ 90 | .animation (@name, @duration: 300ms, @delay: 0, @ease: ease) { 91 | -moz-animation : @name, @duration, @delay, @ease; 92 | -ms-animation : @name, @duration, @delay, @ease; 93 | -webkit-animation : @name, @duration, @delay, @ease; 94 | } 95 | 96 | .transform (@deg) { 97 | transform : @deg; 98 | -moz-transform : @deg; 99 | -ms-transform : @deg; 100 | -o-transform : @deg; 101 | -webkit-transform : @deg; 102 | } 103 | 104 | .scale (@multiplier) { 105 | transform : scale(@multiplier); 106 | -moz-transform : scale(@multiplier); 107 | -ms-transform : scale(@multiplier); 108 | -o-transform : scale(@multiplier); 109 | -webkit-transform : scale(@multiplier); 110 | } 111 | 112 | .rotate (@deg) { 113 | -moz-transform : rotate(@deg); 114 | -ms-transform : rotate(@deg); 115 | -o-transform : rotate(@deg); 116 | -webkit-transform : rotate(@deg); 117 | } 118 | 119 | .skew (@deg, @deg2) { 120 | transform : skew(@deg, @deg2); 121 | -moz-transform : skew(@deg, @deg2); 122 | -ms-transform : skew(@deg, @deg2); 123 | -o-transform : skew(@deg, @deg2); 124 | -webkit-transform : skew(@deg, @deg2); 125 | } 126 | 127 | /* Font Face 128 | ----------------------------------------------------------------------------- */ 129 | .font(@fontName) { 130 | @font-face { 131 | font-family: "@{fontName}"; 132 | src: url("fonts/@{fontName}/@{fontName}.eot"); 133 | src: url("fonts/@{fontName}/@{fontName}.eot?#iefix") format("embedded-opentype"), 134 | url("fonts/@{fontName}/@{fontName}.woff") format("woff"), 135 | url("fonts/@{fontName}/@{fontName}.ttf") format("truetype"), 136 | url("fonts/@{fontName}/@{fontName}.svg#svgFontName") format("svg"); 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin border-radius ($radius: 4px) { 2 | border-radius : $radius; 3 | -moz-border-radius : $radius; 4 | -webkit-border-radius : $radius; 5 | } 6 | @mixin border-radius-all ($topleft: 4px, $topright: 4px, $bottomright: 4px, $bottomleft: 4px) { 7 | border-radius : $topleft $topright $bottomright $bottomleft; 8 | -moz-border-radius : $topleft $topright $bottomright $bottomleft; 9 | -ms-border-radius : $topleft $topright $bottomright $bottomleft; 10 | -o-border-radius : $topleft $topright $bottomright $bottomleft; 11 | -webkit-border-radius : $topleft $topright $bottomright $bottomleft; 12 | } 13 | 14 | @mixin opacity ($opacity: 0.5) { 15 | $ieOpacity : $opacity * 100; 16 | opacity : $opacity; 17 | -moz-opacity : $opacity; 18 | -webkit-opacity : $opacity; 19 | -ms-filter : progid:DXImageTransform.Microsoft.Alpha(opacity=#{$ieOpacity}); /* IE 8 */ 20 | filter : alpha(opacity = #{$ieOpacity}); /* IE 5-7 */ 21 | } 22 | 23 | @mixin background-alpha($color, $alpha) { 24 | $acolor : hsla(hue($color), saturation($color), lightness($color), $alpha); 25 | $iecolor : argb($acolor); 26 | 27 | background-color : $color; /* fallback color */ 28 | background-color : $acolor; 29 | 30 | /* IE */ 31 | background-color : transparent\9; 32 | filter : progid:DXImageTransform.Microsoft.gradient(startColorstr= #{$iecolor}, endColorstr= #{$iecolor}); 33 | zoom:1; 34 | } 35 | 36 | @mixin box-shadow ($x-size:10px, $y-size:10px, $blur:5px, $color: $black, $spread:0) { 37 | box-shadow : $x-size $y-size $blur $spread $color; 38 | -moz-box-shadow : $x-size $y-size $blur $spread $color; 39 | -webkit-box-shadow : $x-size $y-size $blur $spread $color; 40 | } 41 | @mixin box-shadow-inset ($x-size: 10px, $y-size: 10px, $blur: 5px, $color: $black, $spread:0) { 42 | box-shadow : inset $x-size $y-size $blur $spread $color; 43 | -moz-box-shadow : inset $x-size $y-size $blur $spread $color; 44 | -webkit-box-shadow : inset $x-size $y-size $blur $spread $color; 45 | } 46 | 47 | @mixin gradient-vertical ($firstColor: #FFF, $secondColor: #DDD) { 48 | background : $firstColor; /* Fallback solid color for old browsers */ 49 | background : linear-gradient(to bottom, $firstColor 0%, $secondColor 100%); /* W3C */ 50 | background : -moz-linear-gradient(top, $firstColor 0%, $secondColor 100%); /* FF 3.6+ */ 51 | background : -ms-linear-gradient(top, $firstColor 0%, $secondColor 100%); /* IE 10+ */ 52 | background : -o-linear-gradient(top, $firstColor 0%, $secondColor 100%); /* Opera 11.10+ */ 53 | background : -webkit-linear-gradient(top, $firstColor 0%,$secondColor 100%); /* Chrome 10+, Safari 5.1+ */ 54 | background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,$firstColor), color-stop(100%,$secondColor)); /* Chrome, Safari 4+ */ 55 | filter : progid:DXImageTransform.Microsoft.gradient(startColorstr= '#{$firstColor}', endColorstr= '#{$secondColor}', GradientType=0); /* IE 6-9 */ 56 | } 57 | 58 | @mixin gradient-horizontal ($firstColor: #FFF, $secondColor: #DDD) { 59 | background : $firstColor; /* Fallback solid color for old browsers */ 60 | background : linear-gradient(to right, $firstColor 0%, $secondColor 100%); /* W3C */ 61 | background : -moz-linear-gradient(left, $firstColor 0%, $secondColor 100%); /* FF 3.6+ */ 62 | background : -ms-linear-gradient(left, $firstColor 0%, $secondColor 100%); /* IE 10+ */ 63 | background : -o-linear-gradient(left, $firstColor 0%, $secondColor 100%); /* Opera 11.10+ */ 64 | background : -webkit-linear-gradient(left, $firstColor 0%,$secondColor 100%); /* Chrome 10+, Safari 5.1+ */ 65 | background : -webkit-gradient(linear, left top, right top, color-stop(0%,$firstColor), color-stop(100%,$secondColor)); /* Chrome, Safari 4+ */ 66 | filter : progid:DXImageTransform.Microsoft.gradient(startColorstr= '#{$firstColor}', endColorstr= '#{$secondColor}', GradientType=1); /* IE 6-9 */ 67 | } 68 | 69 | @mixin transition ($type:all, $time:0.2s, $ease:ease) { 70 | transition : $type $time $ease; 71 | -moz-transition : $type $time $ease; 72 | -webkit-transition : $type $time $ease; 73 | -o-transition : $type $time $ease; 74 | } 75 | 76 | @mixin animation ($name, $duration: 300ms, $delay: 0, $ease: ease) { 77 | -moz-animation : $name, $duration, $delay, $ease; 78 | -ms-animation : $name, $duration, $delay, $ease; 79 | -webkit-animation : $name, $duration, $delay, $ease; 80 | } 81 | 82 | @mixin transform ($deg) { 83 | transform : $deg; 84 | -moz-transform : $deg; 85 | -ms-transform : $deg; 86 | -o-transform : $deg; 87 | -webkit-transform : $deg; 88 | } 89 | 90 | @mixin scale ($multiplier) { 91 | transform : scale($multiplier); 92 | -moz-transform : scale($multiplier); 93 | -ms-transform : scale($multiplier); 94 | -o-transform : scale($multiplier); 95 | -webkit-transform : scale($multiplier); 96 | } 97 | 98 | @mixin rotate ($deg) { 99 | -moz-transform : rotate($deg); 100 | -ms-transform : rotate($deg); 101 | -o-transform : rotate($deg); 102 | -webkit-transform : rotate($deg); 103 | } 104 | 105 | @mixin skew ($deg, $deg2) { 106 | transform : skew($deg, $deg2); 107 | -moz-transform : skew($deg, $deg2); 108 | -ms-transform : skew($deg, $deg2); 109 | -o-transform : skew($deg, $deg2); 110 | -webkit-transform : skew($deg, $deg2); 111 | } 112 | 113 | @mixin font($fontName) { 114 | @font-face { 115 | font-family: "#{$fontName}"; 116 | src: url("fonts/#{$fontName}/#{$fontName}.eot"); 117 | src: url("fonts/#{$fontName}/#{$fontName}.eot?#iefix") format("embedded-opentype"), 118 | url("fonts/#{$fontName}/#{$fontName}.woff") format("woff"), 119 | url("fonts/#{$fontName}/#{$fontName}.ttf") format("truetype"), 120 | url("fonts/#{$fontName}/#{$fontName}.svg#svgFontName") format("svg"); 121 | } 122 | } 123 | --------------------------------------------------------------------------------