Last active
September 19, 2017 15:26
-
-
Save nire0510/d0b27a76c2de7a03e45b to your computer and use it in GitHub Desktop.
[Usefull SASS Mixins] #sass #css
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
| $vendors: -webkit-, -moz-, -ms-, -o-, ''; | |
| @mixin property-vendor-prefixer($property, $value) { | |
| @each $vendor in $vendors { | |
| #{$vendor}#{$property}: $value; | |
| } | |
| } | |
| @mixin value-vendor-prefixer($property, $value) { | |
| @each $vendor in $vendors { | |
| #{$property}: #{$vendor}#{$value}; | |
| } | |
| } | |
| @mixin transition($property, $duration, $timing, $delay: 0s) { | |
| @each $vendor in $vendors { | |
| #{$vendor}transition: $property $duration $timing $delay; | |
| } | |
| } | |
| @mixin animation($name, $duration, $timing, $delay, $iteration, $direction) { | |
| @each $vendor in $vendors { | |
| #{$vendor}animation: $name $duration $timing $delay $iteration $direction; | |
| } | |
| } | |
| @mixin keyframes($name) { | |
| @-webkit-keyframes #{$name} { | |
| @content; | |
| } | |
| @-moz-keyframes #{$name} { | |
| @content; | |
| } | |
| @-ms-keyframes #{$name} { | |
| @content; | |
| } | |
| @keyframes #{$name} { | |
| @content; | |
| } | |
| } | |
| @mixin clearfix() { | |
| &:before, &:after { | |
| content: ""; | |
| display: table; | |
| } | |
| &:after { | |
| clear: both; | |
| } | |
| } | |
| @mixin triangle ($direction, $size, $color) { | |
| $directions: ( | |
| bottom: top, | |
| top: bottom, | |
| left: right, | |
| right: left | |
| ); | |
| border: solid $size transparent; | |
| border-#{map-get($directions, $direction)}-color: $color; | |
| height: 0; | |
| width: 0; | |
| } | |
| @mixin ellipsis { | |
| text-overflow: ellipsis; | |
| vertical-align: top; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| display: inline-block; | |
| } | |
| @mixin noselect { | |
| -webkit-touch-callout: none; | |
| @include property-vendor-prefixer(user-select, none); | |
| cursor: default; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment