SASS: Mixins

Responsive Query

@mixin media-query($media) {
    // screens bigger than 1200px
    @if $media == big {
        @media only screen and (min-width: 1200px) { @content; }
    }

    // retina content
    @else if $media == retina {
        @media
        only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (   min--moz-device-pixel-ratio: 2),
        only screen and (     -o-min-device-pixel-ratio: 2/1),
        only screen and (        min-device-pixel-ratio: 2),
        only screen and (                min-resolution: 192dpi),
        only screen and (                min-resolution: 2dppx) { @content; }
    }

    // Print content
    @else if $media == print {
        @media print { @content; }
    }

    // Error of none of the above
    @else {
        @error "Invalid type for media-query() mixin.";
    }
}

@include media-query(retina) {
    background-image: image-url("icon@2x.png");
    background-size: 12px 9px;
}

@mixin media($media, $query) {
    @if $media == screen {
        @if $query == xs-up {
            @media only screen and (min-width: $screen-xs) { @content; }
        }

        @else if $query == sm-up {
            @media only screen and (min-width: $screen-sm) { @content; }
        }

        @else if $query == md-up {
            @media only screen and (min-width: $screen-md) { @content; }
        }

        @else if $query == lg-up {
            @media only screen and (min-width: $screen-lg) { @content; }
        }

        @else if $query == xl-up {
            @media only screen and (min-width: $screen-xl) { @content; }
        }

        @else if $query == xxl-up {
            @media only screen and (min-width: $screen-xxl) { @content; }
        }

        @else {
            @media only screen { @content; }
        }
    }

    // retina content
    @else if $media == retina {
        @media
        only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (   min--moz-device-pixel-ratio: 2),
        only screen and (     -o-min-device-pixel-ratio: 2/1),
        only screen and (        min-device-pixel-ratio: 2),
        only screen and (                min-resolution: 192dpi),
        only screen and (                min-resolution: 2dppx) { @content; }
    }

    // Print content
    @else if $media == print {
        @media only print { @content; }
    }

    // Error of none of the above
    @else {
        @error "media-query(): $media is undefined or invalid";
    }
}

@mixin media($media: all, $min: null, $max: null) {
    $breakpoints: (
        xs: $screen-xs,
        sm: $screen-sm,
        md: $screen-md,
        lg: $screen-lg,
        xs-max: $screen-xs-max,
        sm-max: $screen-sm-max,
        md-max: $screen-md-max
    );

    @if $media == retina {
        @media
        only all and (-webkit-min-device-pixel-ratio: 2),
        only all and (   min--moz-device-pixel-ratio: 2),
        only all and (     -o-min-device-pixel-ratio: 2/1),
        only all and (        min-device-pixel-ratio: 2),
        only all and (                min-resolution: 192dpi),
        only all and (                min-resolution: 2dppx) { @content; }
    } @else {
        $query: to-string($media, ", ");

        @if $min {
            @if map-has-key($breakpoints, $min) {
                $query: $query + " and (min-width: #{map-get($breakpoints, $min)})";
            } @else {
                @warn "media(): Invalid value for $min";
            }
        }

        @if $max {
            @if map-has-key($breakpoints, $max) {
                $query: $query + " and (max-width: #{map-get($breakpoints, $max + "-max")})";
            } @else {
                @warn "media(): Invalid value for $max";
            }
        }

        @media only #{$query} { @content }
    }
}

@include media-query(screen) {
    color: green;
}

// OR
@include media-query(screen, md) {
    color: green;
}

// OR
@include media-query(screen, $max: md) {
    color: green;
}

// OR
@include media-query(screen, sm, md) {
    color: green;
}

Schriftgrösse und Zeilenabstand

Die SASS-Funktion strip-unit() ist hier dokumentiert.

// font
$font-size-default: 16px;
$font-line-height-default: 23px;

////
/// Calculate em font-size with pixel fallback for given $size-value based on 16px default
///
/// @param  {Number}    $size-value
////
@mixin font-size($size-value: $font-size-default) {
    $size-value: strip-unit($size-value);

    font-size: $size-value + px;
    font-size: ($size-value / 16) + rem;
}

////
/// Calculate unit less line height by given $line-height px value and $font-size px value
///
/// @param  {Number}    [$line-height = default line height]    Pixel value for desired line height
/// @param  {Number}    [$font-size = default font size]        Pixel value of desired font size
////
@mixin line-height($line-height: $font-line-height-default, $font-size: $font-size-default) {
    line-height: strip-unit($line-height) / strip-unit($font-size);
}

////
/// Calculate font size and line height by given $font-size px value and desired $line-height in px
///
/// @param  {Number}    $font-size                                      Pixel value of desired font size
/// @param  {Number     [$line-height = default line-height]            Pixel value of desired line height
////
@mixin font($font-size: $font-size-default, $line-height: null) {
    @if $line-height == null {
        @if $font-size != $font-size-default {
            // Calculate default font based line-height
            $line-height: ( strip-unit($font-line-height-default) / strip-unit($font-size-default) ) * $font-size;
        } @else {
            $line-height: $font-line-height-default;
        }
    }

    @include font-size($font-size);
    @include line-height($line-height, $font-size);
}

 

html {
    font-size: 100%; /* Don't use 65.2% to force 10px! You won't be able to globally reduce font-size later on */
}

body {
    @include font();
}

h1 {
    @include font(24, 29);
}

 

Cross-Browser RGBa Fallback

@mixin rgba($property, $background: #000, $opacity: 0.75, $mix: #FFF) {
    #{$property}: mix($background, $mix, $opacity * 100%);
    #{$property}: rgba($background, $opacity);
}

 

Cross-Browser Transparency

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

 

Spacing-Creator

////
/// Create spacing set based on given list of spacings, query and base class
///
/// @param  {list}      $spacings                   List of spacing values as numbers
/// @param  {list}      [$queries = null]           List of to be created query options
/// @param  {string}    [$base-class = spacing]     Base class for spacing classes
////
@mixin core-create-spacing($spacings: 10, $queries: null, $base-class: spacing) {
    @each $spacing in $spacings {
        $spacing-value: if($spacing == 0, 0, 1px * $spacing);

        .#{$base-class} {
            // Base bottom spacing: e.g. spacing--bottom-10
            &--bottom-#{$spacing} {
                margin-bottom: $spacing-value;
            }

            // Base top spacing: e.g. spacing--top-10
            &--top-#{$spacing} {
                margin-top: $spacing-value;
            }
        }
    }

    // Query based spacing: e.g. spacing--bottom-xs-up-10
    @each $query in $queries {
        @include media(screen, $query) {
            @each $spacing in $spacings {
                $spacing-value: if($spacing == 0, 0, 1px * $spacing);

                .#{$base-class} {

                    &--#{$query}-bottom-#{$spacing} {
                        margin-bottom: $spacing-value;
                    }

                    &--#{$query}-top-#{$spacing} {
                        margin-top: $spacing-value;
                    }
                }
            }
        }
    }
}