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
Written 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#