This file contains 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
// ---- | |
// Sass (v3.4.0.rc.3) | |
// Compass (v1.0.0.rc.1) | |
// ---- | |
//http://designwoop.com/2014/07/10-useful-sass-mixins-modern-developer/ | |
@mixin css3($property, $value) { | |
@each $prefix in -webkit-, -moz-, -ms-, -o-, '' { | |
#{$prefix}#{$property}: $value; | |
} |
This file contains 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
// ---- | |
// Sass (v3.4.0.rc.3) | |
// Compass (v1.0.0.rc.1) | |
// ---- | |
//Thanks:http://web-design-weekly.com/2013/05/12/handy-sass-mixins/ | |
@mixin breakpoint($point) { | |
@if $point == large { | |
@media (min-width: 64.375em) { @content; } | |
} |
This file contains 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
// ---- | |
// Sass (v3.4.0.rc.3) | |
// Compass (v1.0.0.rc.1) | |
// ---- | |
//Thanks:http://signalvnoise.com/posts/3271-easy-retina-ready-images-using-scss | |
@mixin image-2x($image, $width, $height) { | |
@media (min--moz-device-pixel-ratio: 1.3), | |
(-o-min-device-pixel-ratio: 2.6/2), | |
(-webkit-min-device-pixel-ratio: 1.3), |
This file contains 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
// ---- | |
// Sass (v3.4.0.rc.3) | |
// Compass (v1.0.0.rc.1) | |
// ---- | |
//Thanks:http://nicolasgallagher.com/micro-clearfix-hack/ | |
@mixin clearfix() { | |
&:before, | |
&:after { |
This file contains 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
// ---- | |
// Sass (v3.4.0.rc.3) | |
// Compass (v1.0.0.rc.1) | |
// ---- | |
//Thanks:http://sachagreif.com/useful-sass-mixins/ | |
@function black($opacity){ | |
@return rgba(0,0,0,$opacity) | |
} | |
@function white($opacity){ |
This file contains 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
// ---- | |
// Sass (v3.4.0.rc.3) | |
// Compass (v1.0.0.rc.1) | |
// ---- | |
//http://sachagreif.com/useful-sass-mixins/ | |
@mixin box-emboss($opacity, $opacity2){ | |
box-shadow:white($opacity) 0 1px 0, inset black($opacity2) 0 1px 0; | |
} |
This file contains 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
// ---- | |
// Sass (v3.4.0.rc.3) | |
// Compass (v1.0.0.rc.1) | |
// ---- | |
//Thanks:http://web-design-weekly.com/2013/05/12/handy-sass-mixins/ | |
@mixin opacity($opacity) { | |
opacity: $opacity; | |
$opacity-ie: $opacity * 100; | |
filter: alpha(opacity=$opacity-ie); //IE8 |
This file contains 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
// ---- | |
// Sass (v3.4.0.rc.3) | |
// Compass (v1.0.0.rc.1) | |
// ---- | |
//Thanks:http://web-design-weekly.com/2013/05/12/handy-sass-mixins/ | |
@mixin opacity($opacity) { | |
opacity: $opacity; | |
$opacity-ie: $opacity * 100; | |
filter: alpha(opacity=$opacity-ie); //IE8 |
This file contains 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
// ---- | |
// Sass (v3.4.0.rc.3) | |
// Compass (v1.0.0.rc.1) | |
// ---- | |
//Thanks:http://web-design-weekly.com/2013/05/12/handy-sass-mixins/ | |
@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) { | |
top: $top; | |
right: $right; |
This file contains 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
// ---- | |
// Sass (v3.4.0.rc.3) | |
// Compass (v1.0.0.rc.1) | |
// ---- | |
//Thanks:http://web-design-weekly.com/2013/05/12/handy-sass-mixins/ | |
@mixin line-height($heightValue: 12 ){ | |
line-height: $heightValue + px; //fallback for old browsers | |
line-height: (0.125 * $heightValue) + rem; |