Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Few of mine basic SCSS mixins.

Basic SCSS mixins

Few of mine basic scss mixins. If you'll find some useful mixins missing feel free to write them in commentary.

I'll update this gist once a while.

// Simple transition mixin with all browser coverage
@mixin transitions($transitions...) {
-webkit-transition: $transitions;
-moz-transition: $transitions;
-ms-transition: $transitions;
-o-transition: $transitions;
transition: $transitions;
}
// Add columns to paragraph
@mixin columns($count, $gap) {
-moz-column-count: $count;
-moz-column-gap: $gap;
-webkit-column-count: $count;
-webkit-column-gap: $gap;
column-count: $count;
column-gap: $gap;
}
// Change colour of placholder text in inputs.
@mixin placeholder($color) {
// Webkit, Blink, Edge
::-webkit-input-placeholder {
color: $color;
}
// Mozila Firefox 4 to 18
:-moz-placeholder {
color: $color;
opacity: 1;
}
// Mozilla Firefox 19+
::-moz-placeholder {
color: $color;
opacity: 1;
}
// Internet Explorer 10-11
:-ms-input-placeholder {
color: $color;
}
}
// Rotate div in all browsers
@mixin rotate($degree) {
-moz-transform: rotate($degree);
-o-transform: rotate($degree);
-webkit-transform: rotate($degree);
transform: rotate($degree);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment