Mixins y loops en sass (scss)

Convertir px en em o rem

$browser-context: 16;

@function em($pixels, $unit: em, $context: $browser-context) {
  @return #{$pixels/$context}#{$unit};
}
.em{
  font-size: em(12);
}
.rem{
  font-size: em(12, rem);
}

Genera …

.em {
    font-size: 0.75em;
}
.rem {
    font-size: 0.75rem;
}

Alineado al centro

body {
    display: grid;
    height: 100vh;
    margin: 0;
    place-items: center center;
}

“Old School version”

Centra vertical y horizontalmente, el elemento padre debe tener position: relative;

@mixin center_center{
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);   
}

Demo en codepen

Aspect ratio

@mixin aspect_ratio($height, $width){
    padding-top: ($height / $width) * 100%;
}

Demo en codepen

Aspect ratio con svg y pseudoelemento

@mixin aspect_ratio_svg($width: 16, $height: 9){
    &:before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 #{$width} #{$height}'%3E%3C/svg%3E");
      display: block;
      line-height: 0;
    }    
}

Screen reader text

Oculta texto, alternativas a display: none

@mixin screen-reader-text{
    position: absolute !important;
    top: -9999em !important;
    left: -9999em !important;
}

@mixin hide_content(){
    opacity: 0;
    visibillity: hidden;
    position: absolute;
    pointer-events: none;
}

Buttons

@mixin first_button($color: white, $size: 1em){
    display: inline-block;
    color: $color;
    font-size: $size;
    background-color: #333;
    padding: .5em 2em;
    text-decoration: none;
    border-radius: 3px;
    transition: .2s;
    &:hover, &:focus{
        cursor: pointer;
        opacity: .7;
    }   
}

Css arrows

@mixin css_left_arrow(
    $width: 15px,
    $border-width: 1px,
    $position: 50%, 
    $bg-color: $first-color, 
    $border-color: $first-color
    ){

    position: relative;
    &:after, &:before {
        right: 100%;
        top: $position;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }
    &:after {
        border-color: transparent;
        border-right-color: $bg-color;
        border-width: $width;
        margin-top: -$width;
    }

    &:before {
        border-color: transparent;
        border-right-color: $border-color;
        border-width: $width + $border-width;
        margin-top: -($width + $border-width);
    }
}

@mixin css_right_arrow(
    $width: 15px,
    $border-width: 1px,
    $position: 50%, 
    $bg-color: $first-color, 
    $border-color: $first-color
    ){

    position: relative;
    &:after, &:before {
        left: 100%;
        top: $position;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }
    &:after {
        border-color: transparent;
        border-left-color: $bg-color;
        border-width: $width;
        margin-top: -$width;
    }

    &:before {
        border-color: transparent;
        border-left-color: $border-color;
        border-width: $width + $border-width;
        margin-top: -($width + $border-width);
    }
}

@mixin css_top_arrow(
    $width: 15px,
    $border-width: 1px,
    $position: 50%, 
    $bg-color: $first-color, 
    $border-color: $first-color
    ){

    position: relative;

    &:after, &:before {
        bottom: 100%;
        left: $position;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }
    &:after {
        border-color: transparent;
        border-bottom-color: $bg-color;
        border-width: $width;
        margin-left: -$width;
    }

    &:before {
        border-color: transparent;
        border-bottom-color: $border-color;
        border-width: $width + $border-width;
        margin-left: -($width + $border-width);
    }
}

@mixin css_bottom_arrow(
    $width: 15px,
    $border-width: 1px,
    $position: 50%, 
    $bg-color: $first-color, 
    $border-color: $first-color
    ){

    position: relative;

    &:after, &:before {
        top: 100%;
        left: $position;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }
    &:after {
        border-color: transparent;
        border-top-color: $bg-color;
        border-width: $width;
        margin-left: -$width;
    }

    &:before {
        border-color: transparent;
        border-top-color: $border-color;
        border-width: $width + $border-width;
        margin-left: -($width + $border-width);
    }
}

Demo en codepen

Imágenes en blanco y negro

@mixin blend-gray{
    -webkit-filter: sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);
    filter: sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);
}

Socialmedia colors

$socialmedia-colors: (
    twitter: #55acee,
    pinterest: #CA2028,
    youtube: #F00000,
    foursquare: #0086BF,
    facebook: #3b5998,
    flickr: #ff0084,
    google: #dd4b39,
    instagram: #3f729b,
    linkedin: #007bb6,
    vimeo: #1ab7ea
);

@each $social, $value in $socialmedia-colors{
    .share .#{$social} a{
      background-color: $value;
      background-image: url('#{$i-folder}/share/#{$social}.svg'); 
    }
}

Aparecer desaparecer

@mixin toggle($top, $left){
    position: absolute;
    &.appear{
        top: $top;
        left: $left;
        opacity: 1;
        transition: .2s;
    }
    &.disappear{
        opacity: 0;
        visibility: hidden;
    }
}

Demo en codepen

Sass @each y nth en listados

Como asignar un icono, por ejemplo, a un listado dependiendo del orden que ocupan.

$icons_services: (
  reception24,
  guardaequipajes,
);

@each $ico in $icons_services {
    $i: index($icons_services, $ico);
    .services li:nth-of-type(#{$i}) { 
        background-image: url('#{$ico}.png');
    }
}