SASS, SCSS mixins

breakpoint.scss

$breakpoints: (
  "sm": ( min-width: 640px ),
  "md": ( min-width: 768px ),
  "lg": ( min-width: 1024px ),
  "xl": ( min-width: 1280px )
);

// Usage
// @include breakpoint(xs) { ... }
// or
// @include breakpoint("max-width: 1199px") { ... }
@mixin breakpoint($name) {
  @if map-has-key($breakpoints, $name) {
      @media #{inspect(map-get($breakpoints, $name))} {
          @content;
      }
  }
  @else {
      @media ($name) {
          @content;
      }
  }
}

mixins.scss

// Vendor prefixes
@mixin prefix($property, $value, $vendors: webkit moz ms o) {
    @if $vendors {
        @each $vendor in $vendors {
            #{"-" + $vendor + "-" + $property}: #{$value};
        }
    }

    #{$property}: #{$value};
}

@mixin prefix-value($property, $value, $vendors: webkit moz ms o) {
    @if $vendors {
        @each $vendor in $vendors {
            #{$property}: #{"-" + $vendor + "-" + $value};
        }
    }

    #{$property}: #{$value};
}

@mixin rem($property, $value) {
    #{$property}: ($value * 10) + px;
    #{$property}: $value + rem;
}

// Requires: @mixin prefix
@mixin transform($value) {
    @include prefix(transform, $value);
}

// Requires: @mixin prefix
@mixin transition($property, $duration:0.3s, $function: ease-out) {
    @include prefix(transition, $property $duration $function, moz webkit o);
}

// Requires: @mixin prefix
@mixin border-radius($width) {
    @include prefix(border-radius, $width, moz webkit);
}

// Requires: @mixin rem
@mixin line-height($value) {
    @include rem(line-height, $value)
}

// Requires: @mixin rem
@mixin font-size($value) {
    @include rem(font-size, $value)
}

// Requires: @mixin prefix
@mixin box-shadow($shadows...) {
    @include prefix(box-shadow, $shadows, moz webkit);
}

// Requires: @mixin prefix
@mixin opacity($opacity) {
    @include prefix(opacity, $opacity, moz webkit);
    zoom: 1;
    filter: alpha(opactiy=($opacity * 100));
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity * 100})";
}

// For `ul` an `ol` tags.
@mixin list-plain {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}

// Display table
@mixin display-table-row {
    display: table-row;
}

@mixin display-table-cell {
    // vertical-align: top;
    display: table-cell;
}

// Usage:
// background-image: linear-gradient(to bottom, rgba(black, 0.0), rgba(black, 0.4), rgba(black, 0.6)); 
@mixin linear-gradient($direction, $color-stops...) {
    background: nth(nth($color-stops, 1), 1);
    background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
    background: linear-gradient($direction, $color-stops);
}

@mixin display-table($row: '', $cell: '') {
    display: table;
    table-layout: fixed;
    width: 100%;

    @if $row != '' {
        > #{$row} {
            @include display-table-row;

            @if $cell != '' {
                > #{$cell} {
                    @include display-table-cell;
                }
            }
        }
    }
}

// Clearfix
@mixin clearfix {
    *zoom: 1;

    &:before,
    &:after {
      display: table;
      line-height: 0;
      content: "";
    }

    &:after {
      clear: both;
    }
}