[Useful SCSS Mixins 1] - Selection of useful SCSS mixins #scss #sass #mixin

andy.scss

/// Forces browsers to use hardware acceleration for transforms
/// @access public
/// @example scss - Usage
///   .foo {
///     @include ha;
///   }
/// @example css - Result
///   .foo {
///     -webkit-transform: translate3d(0, 0, 0);
///     -moz-transform: translate3d(0, 0, 0);
///     transform: translate3d(0, 0, 0);
///   }
@mixin ha {
    @include prefix(transform, translate3d(0, 0, 0), 'webkit' 'ms');
}



/// Retina image media query helper; given an image path with a 2x-sized version of an image, will load that image as a background-image on high-resolution devices.
/// @access public
/// @param {String} $image - Image path
/// @param {Length} $width - Image width
/// @param {Height} $height - Image height
/// @example scss - Usage
///   .foo {
///     @include image-2x('../images/image.png', 100%, auto);
///   }
@mixin image-2x($image, $width, $height) {
    @media (-webkit-min-device-pixel-ratio: 1.3),
           (min-resolution: 124dpi),
           (min-resolution: 1.3dppx) {
        /* on retina, use image that's scaled by 2 */
        background-image: url($image);
        background-size: $width $height;
    }
}




/// Embossing text shadow
/// @access public
/// @param {Float} $value - Opacity value
/// @example scss - Usage
///   .foo {
///     @include text-shadow(0.5);
///   }
/// @example css - Result
///   .foo {
///     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
///   }
@mixin text-shadow($value) {
    text-shadow: rgba(255, 255, 255, $value) 0 1px 0;
}




/// Generates a grow-then-shrink (or shrink-then-grow) animation using transform(scale).
/// @access public
/// @param {Number} $scale-change [1.1] - The amount to scale by.
/// @param {List} $animation-properties - Animation properties to apply.
/// @example scss - Usage
///   .foo {
///     @include scale(0.5, 3s ease infinite alternate);
///   }
/// @example css - Result
///   .foo {
///     -webkit-animation: "scale-0-5" 3s ease infinite alternate;
///     animation: "scale-0-5" 3s ease infinite alternate;
///   }
///  // -webkit- prefixed @keyframes are also generated
///  @keyframes scale-0-5 {
///    from, to {
///      -webkit-transform: scale(1);
///      -ms-transform: scale(1);
///      transform: scale(1);
///    }
///    50% {
///      -webkit-transform: scale(0.5);
///      -ms-transform: scale(0.5);
///      transform: scale(0.5);
///    }
///  }
@mixin scale($scale-change:1.1, $animation-properties: 1s ease-in-out) {
  $alias: 'scale-' + str-replace($scale-change + '', '.', '-');

  @include keyframes($alias){
    0%, 100% {
      @include transform(scale(1));
    }
    50% {
      @include transform(scale($scale-change));
    }
  }

  @include prefix(animation, $alias $animation-properties, 'webkit');
}




/// Background gradient helper
/// @access public
/// @param {Color} $start-color - Start color
/// @param {Color} $end-color - End color
/// @param {String} $orientation - Type of gradient, either `vertical`, `horizontal` or `radial`
/// @example scss - Usage
///   .foo {
///     @include background-gradient(red, black, 'vertical');
///   }
/// @example css - Result
///   .foo {
///     background: -webkit-linear-gradient(top, red, black);
///     background: linear-gradient(to bottom, red, black);
///   }
@mixin background-gradient($start-color, $end-color, $orientation) {
    background: $start-color;

    @if $orientation == 'vertical' {
      background: -webkit-linear-gradient(top, $start-color, $end-color);
      background: linear-gradient(to bottom, $start-color, $end-color);
    } @else if $orientation == 'horizontal' {
      background: -webkit-linear-gradient(left, $start-color, $end-color);
      background: linear-gradient(to right, $start-color, $end-color);
    } @else {
      background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color);
      background: radial-gradient(ellipse at center, $start-color, $end-color);
    }
}





/// Given the location of a webfont, will generate a font-face declaration with multiple file formats.
/// @access public
/// @param {String} $font-name - Font family name
/// @param {String} $file-name - File name (no extension)
/// @param {String | Number} $weight [normal] - Font weight
/// @param {String} $style [normal] - Font style
/// @example scss - Usage
///   @include font-face('gotham', '/fonts/gotham');
@mixin font-face($font-name, $file-name, $weight: normal, $style: normal) {
  @font-face {
    font-family: quote($font-name);
    src: url($file-name + '.eot');
    src: url($file-name + '.eot?#iefix')  format('embedded-opentype'),
         url($file-name + '.woff') format('woff'),
         url($file-name + '.ttf')  format('truetype'),
         url($file-name + '.svg##{$font-name}')  format('svg');
    font-weight: $weight;
    font-style: $style;
  }
}



// https://github.com/gillesbertaux/andy/blob/master/andy.scss








// ------------------------------------------------------------------------ 
// https://engageinteractive.co.uk/blog/top-10-scss-mixins

@mixin responsive-ratio($x,$y, $pseudo: false) {
    $padding: unquote( ( $y / $x ) * 100 + '%' );
    @if $pseudo {
        &:before {
            @include pseudo($pos: relative);
            width: 100%;
            padding-top: $padding;
        }
    } @else {
        padding-top: $padding;
    }
}

//div {
//    @include responsive-ratio(16,9);
//}



// Triangle generator
mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false){
    @include pseudo($pos: $position);
    width: 0;
    height: 0;
    @if $round {
        border-radius: 3px;
    }
    @if $direction == down {
        border-left: $size solid transparent;
        border-right: $size solid transparent;
        border-top: $size solid $color;
        margin-top: 0 - round( $size / 2.5 );
    } @else if $direction == up {
        border-left: $size solid transparent;
        border-right: $size solid transparent;
        border-bottom: $size solid $color;
        margin-bottom: 0 - round( $size / 2.5 );
    } @else if $direction == right {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;
        border-left: $size solid $color;
        margin-right: -$size;
    } @else if  $direction == left {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;
        border-right: $size solid $color;
        margin-left: -$size;
    }
}




// more media queries
$breakpoints: (
    "phone":        400px,
    "phone-wide":   480px,
    "phablet":      560px,
    "tablet-small": 640px,
    "tablet":       768px,
    "tablet-wide":  1024px,
    "desktop":      1248px,
    "desktop-wide": 1440px
);
@mixin mq($width, $type: min) {
    @if map_has_key($breakpoints, $width) {
        $width: map_get($breakpoints, $width);
        @if $type == max {
            $width: $width - 1px;
        }
        @media only screen and (#{$type}-width: $width) {
            @content;
        }
    }
}


// .site-header {
//    padding: 2rem;
//    font-size: 1.8rem;
//    @include mq('tablet-wide') {
//        padding-top: 4rem;
//        font-size: 2.4rem;
//    }
//}




// HARDWARE
// Simple and effective for when you need to trigger hardware acceleration for some animation, keeping everything fast, slick and flicker-free.

@mixin hardware($backface: true, $perspective: 1000) {
    @if $backface {
        backface-visibility: hidden;
    }
    perspective: $perspective;
}




@mixin truncate($truncation-boundary) {
    max-width: $truncation-boundary;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


// truncate 2 
@mixin truncateText($overflow: ellipsis){
    overflow: hidden;
    white-space: nowrap;
    text-overflow: $overflow;
}



// Text-shadow - Long Shadow
@function makelongshadow($color) {
  $val: 0px 0px $color;
  @for $i from 1 through 200 {
    $val: #{$val}, #{$i}px #{$i}px #{$color};
  }
  @return $val;
}

@mixin longshadow($color) {
  text-shadow: makelongshadow($color);
}

// how to use 
// h1 {
//    font-size: 75px;
//    @include longshadow(darken($color, 5% ));
//  }
//  
//  h2 {
//    font-size: 40px;
//    @include longshadow(darken($color, 8% ));
//  }





// FONT FACE
/* SCSS */
@mixin font-face($name, $file) {
   @font-face {
   font-family: "#{$name}";
   src: url("../fonts/#{$file}.eot");
   src: url("../fonts/#{$file}.eot?#iefix") format("embedded-opentype"),
   url("../fonts/#{$file}.woff") format("woff"),
   url("../fonts/#{$file}.ttf") format("truetype"),
   url("../fonts/#{$file}.svg?#webfont") format("svg");
 }
}

// how to use 
/* SCSS */
@include font-face("My Font", my-font);






// RETINA READY IMAGES
/* SCSS */
@mixin retina-image($image, $width, $height) {
   @media (min--moz-device-pixel-ratio: 1.3),
   (-o-min-device-pixel-ratio: 2.6/2),
   (-webkit-min-device-pixel-ratio: 1.3),
   (min-device-pixel-ratio: 1.3),
   (min-resolution: 1.3dppx) {
       background-image: url($image);
       background-size: $width $height;
   }
}

// example
/* SCSS */
.image {
    background: url("my-image.png") no-repeat;
    @include retina-image("my-image2x.png", 1000px, 500px);
}



// Fixed aspect ratio
/* SCSS */
@mixin aspect-ratio($width, $height) {
   position: relative;
   &:before {
      display: block;
      content: "";
      width: 100%;
      padding-top: ($height / $width) * 100%;
   }
   > .inner-box {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
   }
}

<!-- HTML -->
<div class="outer-box">
   <div class="inner-box"></div>
</div>

/* SCSS */
.outer-box {
   @include aspect-ratio(4, 3);
}





// Width & Height
@mixin box($width, $height=$width) {
  width: $width;
  height: $height;
}

// how to use 
.square {
  @include box(50px);
}

.rectangle {
  @include box(100px, 50px);
}




@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}
Usage
.cf {
  @include clearfix;
}




// MORE MEDIA QUERIES
@mixin screen($size) {
  $desktop: "(min-width: 1024px)";
  $tablet: "(min-width: 768px) and (max-width: 1023px)";
  $mobile: "(max-width: 767px)";
  @if $size == desktop {
    @media only screen and #{$desktop} {
      @content;
    }
  }
  @else if $size == tablet {
    @media only screen and #{$tablet} {
      @content;
    }
  }
  @else if $size == mobile {
    @media only screen and #{$mobile} {
      @content;
    }
  }
  @else {
    @media only screen and #{$size} {
      @content;
    }
  }
}
// Usage
.wrapper {
  margin: 0 auto;
  width: 100%;
  @include screen('tablet') {
    width: 90%;
  }

  @include screen('desktop') {
    width: 85%;
  }
}



// https://w3bits.com/sass-mixins/







// EVEN MORE MEDIE QUERIES
// Define the breakpoints
$breakpoint-small: 600px;
$breakpoint-med-small: 960px;
$breakpoint-med: 1175px;

@mixin screen($size, $type: max, $pixels: $breakpoint-small) {
  @if $size == 'small' {
    @media screen and ($type + -width: $breakpoint-small) {
        @content;
    }
  }
  @else if $size == 'med-small' {
    @media screen and ($type + -width: $breakpoint-med-small) {
        @content;
    }
  }
  @else if $size == 'med' {
    @media screen and ($type + -width: $breakpoint-med) {
        @content;
    }
  }
 @else if $size == 'large' {
    @media screen and ($type + -width: $breakpoint-med) {
        @content;
    }
  }
  @else if $size == 'custom' {
    @media screen and ($type + -width: $pixels + px) {
     @content;
    }
  }
  @else {
    @content;
  }
}
// Using the mixin
.foo {
  @include screen(large) {
    width: 20%;
  }
  @include screen(med) {
    width: 40%;
  }
  @include screen(med-small) {
    width: 60%;
  }
  @include screen(small) {
    width: 80%;
  }
  @include screen(custom, max, 400) {
    width: 100%;
  }
}






// px to REM
Consistent font sizes
Set a rem font size in your document, to use for all your text elements. This is a better way to scale up and down fonts instead of em. Using em will compound based on the other CSS attributes, but rem will only scale up or down based on the size you define in your HTML document. Separating a .scss file for all your typography and using the below mixin to define your default font sizes will drastically automate your typography coding workflow.

// Define default font size
@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}
//Usage
p {
  @include font-size(14px)
}
//Output
p {
  font-size: 14px; //For unsupported browsers
  font-size: 0.8rem;
}