Jason McCoy 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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin vertical-align { | |
| position: relative; | |
| top: 50%; | |
| -webkit-transform: translateY(-50%); | |
| -ms-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| } | |
| // Usage | |
| div { |
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin xPos($x) { | |
| -webkit-transform:translateX($x); | |
| -moz-transform:translateX($x); | |
| -ms-transform:translateX($x); | |
| transform:translateX($x); | |
| } | |
| /* Usage */ | |
| div { | |
| @include xPos(50px); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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%) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin column-width ( $value: 150px ) { | |
| -webkit-column-width: $value; | |
| -moz-column-width: $value; | |
| column-width: $value; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin box-sizing($type) { | |
| -webkit-box-sizing:$type; | |
| -moz-box-sizing:$type; | |
| box-sizing:$type; | |
| } | |
| // Usage | |
| div { | |
| @include box-sizing(border-box); | |
| } |
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/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin opacity($opacity) { | |
| opacity: $opacity; | |
| $opacity-ie: $opacity * 100; | |
| filter: alpha(opacity=$opacity-ie); //IE8 | |
| } |
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/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin transition($args) { | |
| -webkit-transition: $args; | |
| -moz-transition: $args; | |
| -ms-transition: $args; | |
| -o-transition: $args; | |
| transition: $args; | |
| } |
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/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin keyframes($animation-name) { | |
| @-webkit-keyframes $animation-name { | |
| @content; | |
| } | |
| @-moz-keyframes $animation-name { | |
| @content; | |
| } | |
| @-ms-keyframes $animation-name { | |
| @content; | |
| } |