mixins.scss

In this example below you will see how to do a mixins.scss with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by prebla, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright prebla ©
  • HTML
  • CSS
  • JavaScript
    

/*Downloaded from https://www.codeseek.co/prebla/mixinsscss-GjpoGb */
    @mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

@mixin box-shadow($arguments...) {
  -webkit-box-shadow: $arguments;
  -moz-box-shadow: $arguments;
  box-shadow: $arguments;
}

@mixin box-sizing($sizing: border-box) {
  -moz-box-sizing: $sizing;
  -webkit-box-sizing: $sizing;
  box-sizing: $sizing;
}

/* ANIMATION */

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @-ms-keyframes #{$animation-name} {
    @content;
  }
  @-o-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};
}

@mixin animation-delay($sec) {
  -webkit-animation-delay: $sec;
  -moz-animation-delay: $sec;
  -ms-animation-delay: $sec;
  -o-animation-delay: $sec;
  animation-delay: $sec;
}

@mixin animation-duration($sec) {
  -webkit-animation-duration: $sec;
  -moz-animation-duration: $sec;
  -ms-animation-duration: $sec;
  -o-animation-duration: $sec;
  animation-duration: $sec;
}

@mixin animation-name($name) {
  -webkit-animation-name: $name;
  -moz-animation-name: $name;
  -ms-animation-name: $name;
  -o-animation-name: $name;
  animation-name: $name;
}

@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}

@mixin appearance($args...) {
  -webkit-appearance: $args;
  -moz-appearance: $args;
  appearance: $args;
}

@mixin userSelect($type) {
  -webkit-user-select: $type;  /* Chrome all / Safari all */
  -moz-user-select: $type;     /* Firefox all */
  -ms-user-select: $type;      /* IE 10+ */
  user-select: $type;
}

@mixin input-placeholder {
  &::-webkit-input-placeholder { @content; }
  &:-moz-placeholder { @content; }
  &::-moz-placeholder { @content; }
  &:-ms-input-placeholder { @content; }
}

@mixin focus-outline($color: map_get($shadow-colors, focus), $offset: -2px) {
  &:focus:not(:disabled):not([aria-disabled="true"]):not(.disabled) {
    //@include box-shadow(none);
    //@include box-shadow(inset 0px 0px 2px 1px $color);
    @include box-shadow(0 0 2px 1px $color);
    outline: 2px solid $color;
    outline-offset: $offset;
  }
}

/**
 * Generate random color/Pick color randomly from predefined list of colors
 * @palette {Array} - SCSS list of colors (optional)
 *
 * @returns {String} Color - either rgba if generated random or item from the list of colors
 */
@function randomColor($palette: false) {
  $color: '';

  @if ($palette) {
    $color: map-get($palette, nth(map-keys($palette), random(length(map-keys($palette)))));
  }
  @else {
    $red: random(256)-1;
    $green: random(256)-1;
    $blue: random(256)-1;
    $alpha: random(100)/100;

    $color: rgba($red, $green, $blue, $alpha);
  }

  @return $color;
}



/*Downloaded from https://www.codeseek.co/prebla/mixinsscss-GjpoGb */
    

Comments