Last active
December 19, 2015 07:19
-
-
Save yvesvanbroekhoven/5917927 to your computer and use it in GitHub Desktop.
A list of SCSS mixins & functions I use a lot
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
| // | |
| // Shake horizontally | |
| // | |
| // Use: | |
| // @include animation(shake-x 1s); | |
| // | |
| @include keyframes(shake-x) { | |
| 0%, 100% { | |
| @include translateX(0); | |
| } | |
| 10%, 30%, 50%, 70%, 90% { | |
| @include translateX(-10px); | |
| } | |
| 20%, 40%, 60%, 80% { | |
| @include translateX(10px); | |
| } | |
| } |
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
| // | |
| // Gray shorthand | |
| // | |
| // @param value (0..255) | |
| // @param transparency (0..1) | |
| // | |
| // example: | |
| // body { color: gray(50); } => rgba(50,50,50, 1) | |
| // body { background-color: gray(150, 0.5); } => rgba(150,150,150, 0.5) | |
| // | |
| @function gray($value, $transparency: 1) { | |
| @return rgba($value, $value, $value, $transparency); | |
| } | |
| // | |
| // Spiderman is a mixin to position absolute an element in another | |
| // element top to bottom, left to right | |
| // | |
| // @param $offset Offset from the edge | |
| // | |
| @mixin spiderman($offset: 0) { | |
| bottom: $offset; | |
| left: $offset; | |
| position: absolute; | |
| right: $offset; | |
| top: $offset; | |
| } | |
| // | |
| // Style input placeholder text | |
| // | |
| // Example: | |
| // | |
| // input { | |
| // @include placeholder { | |
| // color: yellow; | |
| // }; | |
| // } | |
| // | |
| @mixin placeholder { | |
| @each $prefix in ":-webkit-input", "moz", ":-moz", "-ms-input" { | |
| &:#{$prefix}-placeholder { | |
| @content; | |
| } | |
| } | |
| } | |
| // | |
| // Use REM units for fonts | |
| // Fallback for older browsers to pixel value | |
| // | |
| // Be sure to set the font-size on <html> to 62.5% for easy calculations | |
| // So 1.6rem equals 16px | |
| // | |
| // @param $size-value Defaults to 1.6 | |
| // | |
| // More info about REM: | |
| // http://snook.ca/archives/html_and_css/font-size-with-rem | |
| // | |
| @mixin font-size($size-value: 1.6) { | |
| font-size: ($size-value * 10) + px; | |
| font-size: $size-value + rem; | |
| } | |
| // Target only Mozilla browsers | |
| // | |
| // More info: | |
| // http://css-tricks.com/snippets/css/css-hacks-targeting-firefox/ | |
| @mixin moz-only { | |
| @-moz-document url-prefix() { | |
| @content | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment