Last Updated: February 25, 2016
·
3.405K
· gisugosu

SASS Positioning Mixin

A simple mixin for positioning elements with SASS.

// ============================================================
//          Positioning Mixins                                  
// ------------------------------------------------------------

//**
// Private Mixin: _set-position 
// Set the Position for the Position Mixins
//
// @mixin       _set-position
// @param       $position {list} One Value = top, Two Value = top left, Four Values = top right bottom left (t = zero position) can be in px or %
// @usage:      +_set-position($position)
//                  ...
//**
@mixin _set-position($position)

    $targets: null !default
    $count: null !default

    $count: length($position)

    @if $count == 1
        $targets: top
    @if $count == 2
        $targets: top left
    @if $count == 4
        $targets: top right bottom left

    @for $i from 1 through $count
        @if nth($position,$i) == t
            #{nth($targets,($i))}: 0
        @else
            @if nth($position,$i) > 0 or nth($position,$i) < 0
                @if unitless(nth($position,$i))
                    #{nth($targets,($i))}: nth($position,$i) + 0px
                @else
                    #{nth($targets,($i))}: nth($position,$i)

//**
// Mixin: relative 
// Relative Positioning Elements
//
// @mixin       relative
// @param       $pos {list} One Value = top, Two Value = top left, Four Values = top right bottom left (t = zero position) can be in px or %
// @usage:      +relative(1)
//                  ...
//**
@mixin relative($pos: 0)
    position: relative
    +_set-position($pos)

//**
// Mixin: absolute 
// Absolute Positioning Elements
//
// @mixin       absolute
// @param       $pos {list} One Value = top, Two Value = top left, Four Values = top right bottom left (t = zero position) can be in px or %
// @usage:      +absolute(10 10%)
//                  ...
//**
@mixin absolute($pos: 0 0 0 0)
    position: absolute
    +_set-position($pos)

//**
// Mixin: fixed 
// Fixed Positioning Elements
//
// @mixin       fixed
// @param       $pos {list} One Value = top, Two Value = top left, Four Values = top right bottom left (t = zero position) can be in px or %
// @usage:      +fixed(10)
//                  ...
//**
@mixin fixed($pos: 0 0 0 0)
    position: fixed
    +_set-position($pos)    

//**
// Mixin: static 
// Reset CSS Position Methods
//
// @mixin       static
// @usage:      +static
//                  ...
//**
@mixin static
    position: static
    left: inherit
    right: inherit
    top: inherit
    bottom: inherit