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: inheritWritten by sascha fuchs
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
 #Css 
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#

 
 
 
 
