Ir al contenido


Actualizado: 16 de mayo de 2018

Mixins scss que uso habitualmente en mis proyectos.

He creado un repositorio en Gitgub con estos mixins.

Clearfix

Obsoleto si usas flexbox o css grid

Sustituye a overflow: hidden; para prevenir desbordamientos en elementos flotados.

@mixin clearfix{
    &:after{
        content: "";
        display: block;
        clear: both;
    }
}   

Link de referencia: Force Element To Self-Clear its Children

Demo en codepen

Alineado al centro

Obsoleto si usas flexbox o css grid

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

Grid

Obsoleto si usas flexbox o css grid

@mixin rowMachine($numPerRow, $margin) {
    width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);
    &:nth-child(n) {
        margin-bottom: $margin;
        margin-right: $margin;
    }
    &:nth-child(#{$numPerRow}n) {
        margin-right: 0;
        margin-bottom: 0;
    }
}

Link de referencia: A Quick Useful Case for Sass Math and Mixins

Demo de Chris Coyier

Demo en codepen

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