Generated by SassMeister.com.

responsive-text-align.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

// screen breakpoints can be sourced from the framework you are using
// In my case, i am injecting here
$screen-xs-max: 768px;
$screen-sm-max: 992px;
$screen-md-max: 1199px;

$mobile-max: $screen-xs-max;
$tablet-max: $screen-sm-max;
$laptop-max: $screen-md-max;

@function unit($val, $unit) {
  @return $val * 1#{$unit};
}

@mixin mobile {
  @media screen and (max-width: $mobile-max) {
    @content;
  }
}
  
@mixin tablet {
  @media screen and (min-width: $mobile-max + 1) and (max-width: $tablet-max) {
    @content;
  }
}

@mixin laptop {
  @media screen and (min-width: $tablet-max + 1) and (max-width: $laptop-max) {
    @content;
  }
}

@mixin computer {
  @media screen and (min-width: $laptop-max + 1) {
    @content;
  }
}

// Usage documentation
// .tha stands for text horizontal align
// .tha-(device)-(l|r|c|j)
// so to horizontally align text in center on Mobile and left on computer use
// these classes correspondingly, .tha-M-c and .tha-C-l
//
// For vertical alignment
// .tva stands for text vertical align
// .tva-(device)-(t|b|m)
// vertically aligning a text to top in tablet and middle otherwise use these
// classes respectively, .tva-T-t and .tva-m
$align-options: t top, b bottom, m middle, l left, r right, c center, j justify;

@mixin make-text-align-mixin($breakpoint: all, $i: length($align-options)) {
  $infix: '';
  @if $breakpoint != "all" {
    $infix: '-#{$breakpoint}';
  }
  
  @while $i > 0 {
    $align-option: nth($align-options, $i);
    
    @if index((l,r,c,j),nth($align-option,1)) {
      // text horizontal align
      .tha#{$infix}-#{nth($align-option,1)}  { text-align: nth($align-option,2) !important; }
    } @else {
      // text vertical align
      .tva#{$infix}-#{nth($align-option,1)}  { vertical-align: nth($align-option,2) !important; }
    }
    
    // reduce counter
    $i: $i - 1;
  }
}


//
// Use the mixin for each breakpoint
//

@include make-text-align-mixin();
@include mobile { 
  @include make-text-align-mixin(M);
}
@include tablet { 
  @include make-text-align-mixin(T);
}
@include laptop { 
  @include make-text-align-mixin(L);
}
@include computer { 
  @include make-text-align-mixin(C);
}