scss Mixins Sass

Posted 2021-05-17

@mixin pseudo($display: block, $pos: absolute, $content: ''){
    content: $content;
    display: $display;
    position: $pos;
}

// USAGE
// div::after {
//     @include pseudo;
//     top: -1rem; left: -1rem;
//     width: 1rem; height: 1rem;
// }


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

// USAGE
input,  
textarea {  
    @include input-placeholder {
        color: $grey;
    }
}



$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;
        }
    }
}

// USAGE

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

// Z-index
// While technically this is just a pure function, but I felt it's worth being on the list as it's so easy to 
// loose track of your z-index values when working in several different files, so we created this so that we could
// store them in one place for easy editing/recording. Just place this snippet in your main variables/settings.scss 
// file (needs to be imported before any of your other files that reference a x-index of course).

@function z($name) {
    @if index($z-indexes, $name) {
        @return (length($z-indexes) - index($z-indexes, $name)) + 1;
    } @else {
        @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
        @return null;
    }
}
$z-indexes: (
    "outdated-browser",
    "modal",
    "site-header",
    "page-wrapper",
    "site-footer"
);

// USAGE
// Then where ever you're wanting to use a z-index value, name it the same as your class
// and add in it into your variables/setting file, like below. You'll never have a "z-index: 99999999;" 
// headache again.

.site-header {
    z-index: z('site-header');
}



// Retina Images

@mixin retina {
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-moz-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3 / 2),
	only screen and (min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx) {
		@content;
	}
}

// USAGE
// .element {
// 		@include retina {
// 			background-image: url(../img/[e-mail]);
// 		}
// 	}





@mixin unselectable {
	-webkit-touch-callout: none;
	user-select: none;
}

@mixin antialias {
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}



@mixin rem($property, $values...) {
    $n: length($values);
    $i: 1;

    $pxlist: ();
    $remlist: ();

    @while $i <= $n {
        $itemVal: (nth($values, $i));
        @if $itemVal != "auto"{
            $pxlist: append($pxlist, $itemVal + px);
            $remlist: append($remlist, ($itemVal / 10) + rem);
        }@else{
            $pxlist: append($pxlist, auto);
            $remlist: append($remlist, auto);
        }
        
    
        $i: $i + 1;
    }

    #{$property}: $pxlist;
    #{$property}: $remlist;
}

// USAGE

// .main{
//     @inlcude rem("margin", 10, 0);
//     @inlcude rem("padding", 10);
//     @inlcude rem("font-size", 12);
// }
// OUTPUT
// .main{
//     margin:10px 0;
//     margin:1rem 0;
//     padding:10px;
//     padding:1rem;
//     font-size:12px;
//     font-size:1.2rem;
// }




@mixin linearGradient($top, $bottom){
    background: $top; /* Old browsers */
    background: -moz-linear-gradient(top,  $top 0%, $bottom 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  $top 0%,$bottom 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  $top 0%,$bottom 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  $top 0%,$bottom 100%); /* IE10+ */
    background: linear-gradient(to bottom,  $top 0%,$bottom 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

// USAGE
// .button{
//     @include linearGradient(#cccccc, #666666);
// }
// OUTPUT
// .button{
//     background: #cccccc;
//   /* Old browsers */
//   background: -moz-linear-gradient(top, #cccccc 0%, #666666 100%);
//   /* FF3.6+ */
//   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #666666));
//   /* Chrome,Safari4+ */
//   background: -webkit-linear-gradient(top, #cccccc 0%, #666666 100%);
//   /* Chrome10+,Safari5.1+ */
//   background: -o-linear-gradient(top, #cccccc 0%, #666666 100%);
//   /* Opera 11.10+ */
//   background: -ms-linear-gradient(top, #cccccc 0%, #666666 100%);
//   /* IE10+ */
//   background: linear-gradient(to bottom, #cccccc 0%, #666666 100%);
//   /* W3C */
//   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000',GradientType=0 );
//   /* IE6-9 */
// }



@mixin roundedCorners($size){
    -webkit-border-radius: $size + px;
        -moz-border-radius: $size + px;
        border-radius: $size + px;  
}

// Usage
// .button{
//     @include roundedCorners(10);
// }
// Output
// .button{
//       -webkit-border-radius: 10px;
//       -moz-border-radius: 10px;
//       border-radius: 10px;
// }



@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

// Usage
// .image{
//     @include opacity(.8);
// }
// Output
// .image{
//     opacity: 0.8;
//     filter: alpha(opacity=80);
// }




// Fazer Gradiente de background que some mesclando com a imagem
// ex de uso:
//   @include linear-gradient(#000, 0.5, 0)

@mixin linear-gradient($color: #000000, $alpha-from: 1, $alpha-to: 0) {
    background-image: linear-gradient(rgba($color, $alpha-from) 0%,
        rgba($color, $alpha-to) 100%);
}

@mixin clothoid-gradient($color: #000000, $alpha-from: 1, $alpha-to: 0) {
    $diff: $alpha-from - $alpha-to;
    background-image: linear-gradient(rgba($color, $alpha-from) 0%,
        rgba($color, $alpha-from - $diff*0.7) 50%,
        rgba($color, $alpha-from - $diff*0.85) 65%,
        rgba($color, $alpha-from - $diff*0.925) 75.5%,
        rgba($color, $alpha-from - $diff*0.963) 82.85%,
        rgba($color, $alpha-from - $diff*0.981) 88%,
        rgba($color, $alpha-to) 100%);
}


// PSEUDO elemento linha -------- TEXTO -----------
@mixin line($display: block, $pos: absolute, $content: ''){
    content: $content;
    display: $display;
    position: $pos;
    background: #1d2129;
    height: 1px;
    top: 50%;
    width: 1240px;
}
// USAGE
// &::after,
// &::before {
//   @include line;
// }


// @include text-shadow(2px, 2px, 2px, rgba(51, 51, 51, 0.5))
@mixin text-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $color: $default) {
    -webkit-text-shadow: $x-axis $y-axis $blur $color;
    -moz-text-shadow: $x-axis $y-axis $blur $color;
    text-shadow: $x-axis $y-axis $blur $color;
}

// @include box-shadow(0, 0, 0, 4px, #000, inset);
@mixin box-shadow($offset-x, $offset-y, $blur-radius, $spread-radius, $color, $inset: false) {
    @if $inset {
        -webkit-box-shadow: inset $offset-x $offset-y $blur-radius $spread-radius $color;
        -moz-box-shadow: inset $offset-x $offset-y $blur-radius $spread-radius $color;
        box-shadow: inset $offset-x $offset-y $blur-radius $spread-radius $color;
    }

    @else {
        -webkit-box-shadow: $offset-x $offset-y $blur-radius $spread-radius $color;
        -moz-box-shadow: $offset-x $offset-y $blur-radius $spread-radius $color;
        box-shadow: $offset-x $offset-y $blur-radius $spread-radius $color;
    }
}


@mixin transparent_bg($bg_image, $overlay_opacity: "", $overlay_color: "") {

  background: -webkit-linear-gradient(left, rgba($overlay_color, $overlay_opacity), rgba($overlay_color, $overlay_opacity)), url($bg_image) no-repeat;
  background: -moz-linear-gradient(left, rgba($overlay_color, $overlay_opacity), rgba($overlay_color, $overlay_opacity)), url($bg_image) no-repeat;
  background: -o-linear-gradient(left, rgba($overlay_color, $overlay_opacity), rgba($overlay_color, $overlay_opacity)), url($bg_image) no-repeat;
  background: -ms-linear-gradient(left, rgba($overlay_color, $overlay_opacity), rgba($overlay_color, $overlay_opacity)), url($bg_image) no-repeat;

}

// USAGE

// .my-div {
//   @include transparent_bg('/bg-image.jpg', 0.4, #000); //  black overlay with 40% opacity
//   background-size: cover; // can use any regular css properties to style background
// }




// .foo {
//     @include placeholder {
//         color: green;
//     }
// }
// OR
// @include placeholder {
//     color: red;
// }
@mixin optional-at-root($sel) {
    @at-root #{if(not &, $sel, selector-append(&, $sel))} {
        @content;
    }
}

@mixin placeholder {
    @include optional-at-root('::-webkit-input-placeholder') {
        @content;
    }

    @include optional-at-root(':-moz-placeholder') {
        @content;
    }

    @include optional-at-root('::-moz-placeholder') {
        @content;
    }

    @include optional-at-root(':-ms-input-placeholder') {
        @content;
    }
}



// USAGE

//  >.advanced-search-container {
//      @include animateHide;
//  }

//  &:hover {
//      >.advanced-search-container {
//          @include animateShow;
//      }
// }

@mixin animateHide {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s,
    opacity 0.5s linear;

}

@mixin animateShow {
    visibility: visible;
    opacity: 1;
}



@mixin goldBackground {
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
        radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%)
}

// Inserir dentro de um :before de uma imagem
// Cria uma linha interna pra servir como moldura
@mixin insideFrame {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    box-shadow: inset 0 0 0 3px $color_saffron_approx;
}

// Colocar na imagem de background para aparecer desfocada
@mixin backBlur {
    filter: blur(8px);
    -webkit-filter: blur(8px);
}

// Colocar na imagem de background para aparecer desfocada e Preta e Branco
@mixin backBlurPB {
    filter: blur(8px) grayscale(1);
    -webkit-filter: blur(8px) grayscale(1);
}

// Quebra o texto conforme tamanho do container
@mixin breakText{
    white-space: -moz-pre-wrap;
    /* Mozilla */
    white-space: -hp-pre-wrap;
    /* HP printers */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    white-space: -pre-wrap;
    /* Opera 4-6 */
    white-space: pre-wrap;
    /* CSS 2.1 */
    white-space: pre-line;
    /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word;
    /* IE */
    word-break: break-all;
}