Reference

10 SCSS utilities I can't live without | Hacking UI

File: SASS_REFERENCE - Documentation by YARD 0.9.12

SASS Margin and Padding Helpers Loop. Generates .m-t-10 type helper classes.

10 SASS (SCSS) mixins you should be using in your projects

How to Use Sass Mixins

Utilities

z-index

$z-indexes: (
    "Loading",
    "Combobox",
    "Dim"
);

@function z($name) {
    @if index($z-indexes, $name) {
        @return (length($z-indexes) - index($z-indexes, $name) * 10);
    } @else {
        @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
        @return null;
   }
}

div {
	z-index: z('FormulaLayer');
}

Respond To

// Breakpoints for each query
$smartphone: 480px;
$tabletPortrait: 767px;
$tabletLandscape: 1024px;
$desktop: 1174px;
$largeScreen: 1400px;
@mixin respondTo($media) {
  @if $media == smartphone {
    @media (max-width: $smartphone) { @content; }
  }
  @else if $media == tablet {
    @media (min-width: $tabletPortrait) and (max-width: $tabletLandscape) { @content; }
  }
  @else if $media == smallScreen {
    @media (max-width: $desktop) { @content; }
  }
  @else if $media == desktop {
    @media (min-width: $desktop) { @content; }
  }
}

div {
    // regular styles here
    @include respondTo(desktop) {
        &:hover { background: blue; } // only add the hover effect on desktop browsers
    }
}

Truncate Text

@mixin truncateText($overflow: ellipsis){
  overflow: hidden;
  white-space: nowrap;
  text-overflow: $overflow; // values are: clip, ellipsis, or a string
}

PXtoREM

$BASE_FONT_SIZE: 12px;

/* FontSize Calculator  */
@function rem($size) {
    $remSize: $size / $BASE_FONT_SIZE;
    @return $remSize * 1rem;
}

div {
	font-size: rem(11px);
}

Clear Fix

%clearfix {
  *zoom: 1;
  &:after {
    content: '';
    display: table;
    line-height: 0;
    clear: both;
  }
}