Skip to content

Instantly share code, notes, and snippets.

View jasonkmccoy's full-sized avatar

Jason McCoy jasonkmccoy

5 followers · 20 following
View GitHub Profile
@jasonkmccoy
jasonkmccoy / sass-vertical-align.scss
Created March 14, 2015 21:20
vertical-align mixin: Vertically aligning elements is challenging even with CSS, but this mixin gives you a nice simple solution
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
// Usage
div {
@jasonkmccoy
jasonkmccoy / sass-xPos.scss
Created March 14, 2015 21:09
xPos mixin: This mixin provides a shorthand for positioning an element along the x axis
@mixin xPos($x) {
-webkit-transform:translateX($x);
-moz-transform:translateX($x);
-ms-transform:translateX($x);
transform:translateX($x);
}
/* Usage */
div {
@include xPos(50px);
@jasonkmccoy
jasonkmccoy / sass-box-shadow.scss
Created March 14, 2015 21:06
Box-shadow mixin
@mixin box-shadow( $h: 10px , $v: 10px , $b: 0px , $s: 0px , $c: #000000 ) {
-webkit-box-shadow: $h $v $b $s $c;
-moz-box-shadow: $h $v $b $s $c;
box-shadow: $h $v $b $s $c;
}
/* Usage */
div {
@include box-shadow(8px, 8px);
}
@jasonkmccoy
jasonkmccoy / sass-circle.sass
Created March 14, 2015 21:05
Circle Mixin
/* Include the border-radius mixin */
=border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
-ms-border-radius: $radius
border-radius: $radius
/* Circle Mixin */
=circle
+border-radius(100%)
@jasonkmccoy
jasonkmccoy / sass-border-radius.scss
Created March 14, 2015 20:55
Border-radius Mixin
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
// Usage
.box {
@include border-radius(10px);
@jasonkmccoy
jasonkmccoy / sass-column-width.scss
Created March 14, 2015 20:52
Column-width Mixin
@mixin column-width ( $value: 150px ) {
-webkit-column-width: $value;
-moz-column-width: $value;
column-width: $value;
}
@jasonkmccoy
jasonkmccoy / sass-box-sizing.scss
Created March 14, 2015 20:46
Box Sizing Mixin
@mixin box-sizing($type) {
-webkit-box-sizing:$type;
-moz-box-sizing:$type;
box-sizing:$type;
}
// Usage
div {
@include box-sizing(border-box);
}
@jasonkmccoy
jasonkmccoy / sass-cross-browser-opacity-mixin.scss
Created March 13, 2015 00:03
Cross Browser Opacity Mixin http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
}
@jasonkmccoy
jasonkmccoy / sass-transitions-mixin.scss
Last active August 29, 2015 14:16
Transitions http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/
@mixin transition($args) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
transition: $args;
}
@jasonkmccoy
jasonkmccoy / sass-animations-keyframes-mixins.scss
Last active August 29, 2015 14:16
Animations and keyframes Mixins http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/
@mixin keyframes($animation-name) {
@-webkit-keyframes $animation-name {
@content;
}
@-moz-keyframes $animation-name {
@content;
}
@-ms-keyframes $animation-name {
@content;
}