Default SASS Mixins

default-mixins.scss

/* MIXINS ___________________________________________*/

// Transitions

@mixin transition($transition-property, $transition-time, $method) {
    -webkit-transition: $transition-property $transition-time $method;
       -moz-transition: $transition-property $transition-time $method;
        -ms-transition: $transition-property $transition-time $method;
            transition: $transition-property $transition-time $method;
}

div {
    @include transition(margin, 1s, ease-in-out);
}

// Gradients

@mixin linearGradient($startColor, $endColor) {
    background: $startColor; /* Old browsers */
    background: -moz-linear-gradient(top,  $startColor 0%, $endColor 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$startColor), color-stop(100%,$endColor)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  $startColor 0%,$endColor 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  $startColor 0%,$endColor 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  $startColor 0%,$endColor 100%); /* IE10+ */
    background: linear-gradient(to bottom,  $startColor 0%,$endColor 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=0 ); /* IE6-8 */
}

div {
    @include linearGradient(#cccccc, #666666);
}

// List Styles

@mixin unordered {
    list-style-position: outside;
    list-style-type: disc;
}

@mixin unordered-inside {
    list-style-position: inside;
    list-style-type: disc;
}

@mixin ordered {
    list-style-position: outside;
    list-style-type: decimal;
}

@mixin ordered-inside {
    list-style-position: inside;
    list-style-type: decimal;
}

@mixin nobullet {
    list-style-type: none;
}

.ul {
    @include unordered;
}


// Truncate

@mixin truncate($truncation-boundary) {
    max-width: $truncation-boundary;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div {
    @include truncate(12em);
}

// Before and After

@mixin pseudo($display: block, $pos: absolute, $content: ''){
    content: $content;
    display: $display;
    position: $pos;
}

div::after {
    @include pseudo;
    height: 1em;
    top: 1em;
    left: 1em;
    width: 1em;
}

// Vertical Align

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.item p {
    @include vertical-align;
}

// Responsive Breakpoints

@mixin breakpoint($point) {
    @if $point == desktop {
        @media (min-width: 70em) { @content ; }
    }
    @else if $point == laptop {
        @media (min-width: 64em) { @content ; }
    }
    @else if $point == tablet {
        @media (min-width: 50em) { @content ; }
    }
    @else if $point == phablet {
        @media (min-width: 37.5em)  { @content ; }
    }
    @else if $point == mobileonly {
        @media (max-width: 37.5em)  { @content ; }
    }
}

div {
    background-color:red;
    @include breakpoint(desktop) {
        background-color:yellow;
    };
}