Handy Sass resources from around the web

toolbox.scss

/*** From http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/ ***/

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

// Helper mixin for offset positioning
// About: From http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
// ---
// Here is an improved version adding some extra features
// ---
// @param [string] $position: position
// @param [list] $args (()): offsets list
// ---
// Explanations
// 1. Output position
// 2. If `$args` is not empty
// 3. Loop other the 4 popular offsets (`$offsets`)
// 4. Check if the current one exists in `$args`
// 5. If it is found in `$args`
// 6. And if it is at last position
// 7. Set it to 0
// 8. Else if it is found at any other index
// 9. Store the next value from `$args`
// 10. If it is a valid length
// 11. Set the offset to this value
// 12. Else if it is another offset
// 13. Set the offset to 0
// 14. Else
// 15. Warn the user
// ---

@mixin position($position, $args: ()) {
  $offsets: top right bottom left;
  position: $position;                                               // 1
  
  @each $offset in $offsets {                                        // 3
    $index: index($args, $offset);                                   // 4
    
    @if $index {                                                     // 5
      @if $index == length($args) {                                  // 6
        #{$offset}: 0;                                               // 7
      }
      @else {                                                        // 8
        $next: nth($args, $index + 1);                               // 9
        @if is-valid-length($next) {                                 // 10
          #{$offset}: $next;                                         // 11
        }
        @else if index($offsets, $next) {                            // 12
          #{$offset}: 0;                                             // 13
        }
        @else {                                                      // 14
          @warn "Invalid value `#{$next}` for offset `#{$offset}`."; // 15
        }
      }
    }
  }
}

// Function checking if $value is a valid length
// ---
// @param [literal] $value: value to test
// ---
// @return [bool]

@function is-valid-length($value) {
  @return (type-of($value) == "number" and not unitless($value)) 
       or (index(auto initial inherit 0, $value) != false);
}
 
// Shorthands
// ---

@mixin absolute($args: ()) {
  @include position(absolute, $args);
}
 
@mixin fixed($args: ()) {
  @include position(fixed, $args);
}
 
@mixin relative($args: ()) {
  @include position(relative, $args);
}

/*** From http://codepen.io/chriscoyier/blog/some-mini-sass-mixins-i-like ***/

@mixin coverer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

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

@mixin word-wrap() {
  word-break:     break-word;
  -webkit-hyphens: auto;
  -moz-hyphens:    auto;
  hyphens:         auto;
}

@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@function black($opacity) {
  @return rgba(black, $opacity)
}

@function white($opacity) {
  @return rgba(white, $opacity)
}

/*** http://www.andrewhoule.me/blog/5-sass-mixins-i-use-on-nearly-every-project/ ***/

@mixin absolutecenter($axis: "both"){
  position:absolute;
  @if $axis == "y"{
    top: 50%;
    transform: translateY(-50%);
  }
  @if $axis == "x"{
    left: 50%;
    transform: translateX(-50%);
  }
  @if $axis == "both"{
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
}

@function solid-lighten($color, $percentage) {
  @return lighten($color, (1-$percentage)*5%);
}
@function solid-darken($color, $percentage) {
  @return darken($color, (1-$percentage)*5%);
}
@mixin rgba($type, $color, $percentage, $shade: ligthen) {
  @if $shade == lighten {
    @if $type == color {
      color: solid-lighten($color, $percentage);
      color: rgba($color, $percentage);
    }
    @if $type == bg {
      background-color: solid-lighten($color, $percentage);
      background-color: rgba($color, $percentage);
    }
  }
  @else {
     @if $type == color {
      color: solid-darken($color, $percentage);
      color: rgba($color, $percentage);
    }
    @if $type == bg {
      background-color: solid-darken($color, $percentage);
      background-color: rgba($color, $percentage);
    }
  }
}

@mixin cf() {
  *zoom: 1;
  &:before, &:after {
    content: '';
    display: table;
  }
  &:after {
    clear: both;
  }
}

@mixin triangle($direction, $size: 0.375rem, $color: #222){
  content: '';
  display: block;
  position: absolute;
  height: 0; width: 0;
  @if ($direction == 'up'){
    border-bottom: $size solid $color;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
  }
  @else if ($direction == 'down'){
    border-top: $size solid $color;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
  }
  @else if ($direction == 'left'){
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-right: $size solid $color;
  }
  @else if ($direction == 'right'){
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $color;
  }
}

@mixin bp($point) {
  @if $point == xl { // 1050px
    @media (max-width: 65.625rem) { @content; }
  }
  @else if $point == lg { // 900px
    @media (max-width: 56.25rem) { @content; }
  }
  @else if $point == md { // 768px
    @media (max-width: 48rem)  { @content; }
  }
  @else if $point == sm { // 600px
    @media (max-width: 37.5rem)  { @content; }
  }
  @else if $point == xs { // 400px
    @media (max-width: 25rem)  { @content; }
  }
}