Skip to content

Instantly share code, notes, and snippets.

@teledirigido
Last active November 30, 2022 15:25
Show Gist options
  • Save teledirigido/e7d346cc05b4d95b8c97 to your computer and use it in GitHub Desktop.
Save teledirigido/e7d346cc05b4d95b8c97 to your computer and use it in GitHub Desktop.
Sass Mixins
//============================================================
// Some of this mixins are from:
//
// adamcbrewer: github.com/adamcbrewer
//
// And other places I can't really remember
//
//============================================================
//============================================================
// BASE
//============================================================
@mixin _prefix($property, $value){
-webkit-#{$property}: #{$value};
-khtml-#{$property}: #{$value};
-moz-#{$property}: #{$value};
-ms-#{$property}: #{$value};
-o-#{$property}: #{$value};
#{$property}: #{$value};
}
//============================================================
// Add font font face
//============================================================
@mixin add-font-face($font-face-name,$font-face-file){
@include font-face($font-face-name,
font-files(
$font-face-file + '.woff', woff,
$font-face-file + '.ttf', ttf,
$font-face-file + '.svg', svg
),
$font-face-file'.eot');
}
//============================================================
// REM
//============================================================
@function rem($size) {
$remSize: $size / 16px;
@return #{$remSize}rem;
}
//============================================================
// Appearance
//============================================================
@mixin appearance ($value) {
-webkit-appearance: $value;
-moz-appearance: $value;
appearance: $value;
}
@mixin background-size ($values...) {
-webkit-background-size: $values; // For Android 2.x
background-size: $values;
}
@mixin columns($count: 3, $gap: 10px , $break: "break" ){
-webkit-column-count: $count;
-moz-column-count: $count;
column-count: $count;
-webkit-column-gap: $gap;
-moz-column-gap: $gap;
column-gap: $gap;
@if $break == "break" {
& > ._cell {
-webkit-transform:translateZ(0); // hack for Chrome+
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;
}
}
}
@mixin user-select($value) {
-webkit-touch-callout: $value;
-webkit-user-select: $value;
-khtml-user-select: $value;
-moz-user-select: $value;
-ms-user-select: $value;
user-select: $value;
}
//============================================================
// Placeholder
//============================================================
@mixin input-placeholder {
&.placeholder { @content; }
&:-moz-placeholder { @content; }
&::-moz-placeholder { @content; }
&:-ms-input-placeholder { @content; }
&::-webkit-input-placeholder { @content; }
&::-op-input-placeholder { @content; }
}
//============================================================
// Structure
//============================================================
@mixin box-sizing ($arguments) {
-webkit-box-sizing: $arguments;
-moz-box-sizing: $arguments;
-o-box-sizing: $arguments;
box-sizing: $arguments;
}
@mixin border-radius ($arguments) {
-webkit-border-radius: $arguments;
-moz-border-radius: $arguments;
-o-border-radius: $arguments;
border-radius: $arguments;
}
//============================================================
// Animations
//============================================================
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-ms-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
@mixin animation($animation, $duration, $transition, $iteration, $fill: forwards, $direction: normal ){
-webkit-animation-name: $animation;
-webkit-animation-duration: $duration;
-webkit-animation-direction: $direction;
-webkit-animation-timing-function: $transition;
-webkit-animation-iteration-count: $iteration;
-webkit-animation-fill-mode:$fill;
-moz-animation-name: $animation;
-moz-animation-duration: $duration;
-moz-animation-direction: $direction;
-moz-animation-timing-function: $transition;
-moz-animation-iteration-count: $iteration;
-moz-animation-fill-mode:$fill;
-o-animation-name: $animation;
-o-animation-duration: $duration;
-o-animation-direction: $direction;
-o-animation-timing-function: $transition;
-o-animation-iteration-count: $iteration;
-o-animation-fill-mode:$fill;
animation-name: $animation;
animation-duration: $duration;
animation-direction: $direction;
animation-timing-function: $transition;
animation-iteration-count: $iteration;
animation-fill-mode:$fill;
}
//============================================================
// Transform
//
// USAGE: ([property ease time] ...)
//============================================================
@function prefix($property, $prefixes: (webkit moz o ms)) {
$vendor-prefixed-properties: transform background-clip background-size;
$result: ();
@each $prefix in $prefixes {
@if index($vendor-prefixed-properties, $property) {
$property: -#{$prefix}-#{$property}
}
$result: append($result, $property);
}
@return $result;
}
@function trans-prefix($transition, $prefix: moz) {
$prefixed: ();
@each $trans in $transition {
$prop-name: nth($trans, 1);
$vendor-prop-name: prefix($prop-name, $prefix);
$prop-vals: nth($trans, 2);
$prefixed: append($prefixed, ($vendor-prop-name $prop-vals), comma);
}
@return $prefixed;
}
@mixin transition($values...) {
$transitions: ();
@each $declaration in $values {
$prop: nth($declaration, 1);
$prop-opts: ();
$length: length($declaration);
@for $i from 2 through $length {
$prop-opts: append($prop-opts, nth($declaration, $i));
}
$trans: ($prop, $prop-opts);
$transitions: append($transitions, $trans, comma);
}
-webkit-transition: trans-prefix($transitions, webkit);
-moz-transition: trans-prefix($transitions, moz);
-o-transition: trans-prefix($transitions, o);
transition: $values;
}
// @mixin transition($properties...){
// @if (length($properties) >= 1){
// @include _prefix('transition', $properties);
// }
// @else {
// @include _prefix('transition', "all 0.2s ease-in-out 0s");
// }
// }
@mixin transform-style ( $arguments ){
-webkit-transform-style: ( $arguments );
-moz-transform-style: ( $arguments );
-ms-transform-style: ( $arguments );
transform-style: ( $arguments );
}
@mixin transform($arguments...) {
-webkit-transform: $arguments;
-ms-transform: $arguments; // IE9
transform: $arguments;
}
@mixin transform-origin($arguments...) {
-webkit-transform-origin: $arguments;
-ms-transform-origin: $arguments; // IE9
transform-origin: $arguments;
}
@mixin rotate($arguments...) {
-webkit-transform: rotate($arguments);
-ms-transform: rotate($arguments); // IE9
transform: rotate($arguments);
}
@mixin backface-visibility ($arguments) {
-webkit-backface-visibility: $arguments;
-moz-backface-visibility: $arguments;
-ms-backface-visibility: $arguments;
-o-backface-visibility: $arguments;
backface-visibility: $arguments;
}
@mixin perspective ($arguments) {
-webkit-perspective: $arguments;
-moz-perspective: $arguments;
-ms-perspective: $arguments;
-o-perspective: $arguments;
perspective: $arguments;
}
@mixin perspective-origin ($arguments) {
-webkit-perspective-origin: $arguments;
-moz-perspective-origin: $arguments;
-ms-perspective-origin: $arguments;
-o-perspective-origin: $arguments;
perspective-origin: $arguments;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment