Absolute

cssowl-absolute

Extendable placeholder and mixin to position an element absolutely.

Source 
// extendable placeholder
%cssowl-absolute
 position: absolute
// mixin
=cssowl-absolute($coordinates:0 false false 0)
 +cssowl-coords($coordinates)
 position: absolute

// extendable placeholder
%cssowl-absolute {
 position: absolute;
}
// mixin
@mixin cssowl-absolute($coordinates:0 false false 0) {
 @include cssowl-coords($coordinates);
 position: absolute;
}

// disabled as less doesn't provide placeholders yet
//.cssowl-absolute {
// position: absolute;
//}
// mixin
.cssowl-absolute(@coordinates:0 false false 0) {
 .cssowl-coords(@coordinates);
 position: absolute;
}

// extendable placeholder
$cssowl-absolute
 position: absolute
// mixin
cssowl-absolute($coordinates=0 false false 0)
 cssowl-coords($coordinates)
 position: absolute
Examples 
<div class='wrapper' style='position:relative;width:50px;height:50px;border:1px solid #59371f;'>
<div class='example-absolute' style='width:10px;height:10px;background:#59371f;'></div>
</div>

<style>
 /* line 3, (__TEMPLATE__) */
 .example-absolute {
 top: 20px;
 left: 20px;
 position: absolute; }
</style>

.example-absolute
 +cssowl-absolute(20px false false 20px)

.example-absolute {
 @include cssowl-absolute(20px false false 20px);
}

.example-absolute {
 .cssowl-absolute(20px false false 20px);
}

.example-absolute
 cssowl-absolute(20px false false 20px)

cssowl-absolute-inside

Mixin to position an element absolutely inside the bounding box.

Source 
// mixin
=cssowl-absolute-inside($width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
 width: $width
 height: $height
 position: absolute
 +cssowl-coords-inside($width, $height, $valign, $halign, $xOffset, $yOffset)

// mixin
@mixin cssowl-absolute-inside($width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
 width: $width;
 height: $height;
 position: absolute;
 @include cssowl-coords-inside($width, $height, $valign, $halign, $xOffset, $yOffset);
}

// mixin
.cssowl-absolute-inside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
 width: @width;
 height: @height;
 position: absolute;
 .cssowl-coords-inside(@width, @height, @valign, @halign, @xOffset, @yOffset);
}

// mixin
cssowl-absolute-inside($width, $height, $valign=top, $halign=left, $xOffset=0, $yOffset=0)
 width: $width
 height: $height
 position: absolute
 cssowl-coords-inside($width, $height, $valign, $halign, $xOffset, $yOffset);
Examples 
<div class='example-absolute-inside' style='position:relative;width:50px;height:50px;border:1px solid #59371f;'>
<div class='top-center' style='width:10px;height:10px;background:#59371f;'></div>
<div class='middle-right' style='width:10px;height:10px;background:#59371f;'></div>
<div class='bottom-center' style='width:10px;height:10px;background:#59371f;'></div>
<div class='middle-left' style='width:10px;height:10px;background:#59371f;'></div>
</div>

<style>
 /* line 4, (__TEMPLATE__) */
 .example-absolute-inside > .top-center {
 width: 10px;
 height: 10px;
 position: absolute;
 top: 0;
 left: 50%;
 margin-left: -5px; }
 /* line 6, (__TEMPLATE__) */
 .example-absolute-inside > .middle-right {
 width: 10px;
 height: 10px;
 position: absolute;
 top: 50%;
 margin-top: -5px;
 right: 0; }
 /* line 8, (__TEMPLATE__) */
 .example-absolute-inside > .bottom-center {
 width: 10px;
 height: 10px;
 position: absolute;
 bottom: 0;
 left: 50%;
 margin-left: -5px; }
 /* line 10, (__TEMPLATE__) */
 .example-absolute-inside > .middle-left {
 width: 10px;
 height: 10px;
 position: absolute;
 top: 50%;
 margin-top: -5px;
 left: 0; }
</style>

.example-absolute-inside
 > .top-center
 +cssowl-absolute-inside(10px, 10px, top, center)
 > .middle-right
 +cssowl-absolute-inside(10px, 10px, middle, right)
 > .bottom-center
 +cssowl-absolute-inside(10px, 10px, bottom, center)
 > .middle-left
 +cssowl-absolute-inside(10px, 10px, middle, left)

.example-absolute-inside {
 > .top-center {
 @include cssowl-absolute-inside(10px, 10px, top, center);
 }
 > .middle-right {
 @include cssowl-absolute-inside(10px, 10px, middle, right);
 }
 > .bottom-center {
 @include cssowl-absolute-inside(10px, 10px, bottom, center);
 }
 > .middle-left {
 @include cssowl-absolute-inside(10px, 10px, middle, left);
 }
}

.example-absolute-inside {
 > .top-center {
 .cssowl-absolute-inside(10px, 10px, top, center);
 }
 > .middle-right {
 .cssowl-absolute-inside(10px, 10px, middle, right);
 }
 > .bottom-center {
 .cssowl-absolute-inside(10px, 10px, bottom, center);
 }
 > .middle-left {
 .cssowl-absolute-inside(10px, 10px, middle, left);
 }
}

.example-absolute-inside
 > .top-center
 cssowl-absolute-inside(10px, 10px, top, center)
 > .middle-right
 cssowl-absolute-inside(10px, 10px, middle, right)
 > .bottom-center
 cssowl-absolute-inside(10px, 10px, bottom, center)
 > .middle-left
 cssowl-absolute-inside(10px, 10px, middle, left)

cssowl-absolute-outside

Mixin to position an element absolutely outside the bounding box.

Source 
// mixin
=cssowl-absolute-outside($width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
 width: $width
 height: $height
 position: absolute
 +cssowl-coords-outside($width, $height, $valign, $halign, $xOffset, $yOffset)

// mixin
@mixin cssowl-absolute-outside($width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
 width: $width;
 height: $height;
 position: absolute;
 @include cssowl-coords-outside($width, $height, $valign, $halign, $xOffset, $yOffset);
}

// mixin
.cssowl-absolute-outside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
 width: @width;
 height: @height;
 position: absolute;
 .cssowl-coords-outside(@width, @height, @valign, @halign, @xOffset, @yOffset);
}

// mixin
cssowl-absolute-outside($width, $height, $valign=top, $halign=left, $xOffset=0, $yOffset=0)
 width: $width
 height: $height
 position: absolute
 cssowl-coords-outside($width, $height, $valign, $halign, $xOffset, $yOffset);
Examples 
<div class='example-absolute-outside' style='position:relative;width:50px;height:50px;border:1px solid #59371f;'>
<div class='top-center' style='background:#59371f;'></div>
<div class='middle-right' style='background:#59371f;'></div>
<div class='bottom-center' style='background:#59371f;'></div>
<div class='middle-left' style='background:#59371f;'></div>
</div>

<style>
 /* line 4, (__TEMPLATE__) */
 .example-absolute-outside > .top-center {
 width: 10px;
 height: 10px;
 position: absolute;
 top: -10px;
 left: 50%;
 margin-left: -5px; }
 /* line 6, (__TEMPLATE__) */
 .example-absolute-outside > .middle-right {
 width: 10px;
 height: 10px;
 position: absolute;
 top: 50%;
 margin-top: -5px;
 right: -10px; }
 /* line 8, (__TEMPLATE__) */
 .example-absolute-outside > .bottom-center {
 width: 10px;
 height: 10px;
 position: absolute;
 bottom: -10px;
 left: 50%;
 margin-left: -5px; }
 /* line 10, (__TEMPLATE__) */
 .example-absolute-outside > .middle-left {
 width: 10px;
 height: 10px;
 position: absolute;
 top: 50%;
 margin-top: -5px;
 left: -10px; }
</style>

.example-absolute-outside
 > .top-center
 +cssowl-absolute-outside(10px, 10px, top, center)
 > .middle-right
 +cssowl-absolute-outside(10px, 10px, middle, right)
 > .bottom-center
 +cssowl-absolute-outside(10px, 10px, bottom, center)
 > .middle-left
 +cssowl-absolute-outside(10px, 10px, middle, left)

.example-absolute-outside {
 > .top-center {
 @include cssowl-absolute-outside(10px, 10px, top, center);
 }
 > .middle-right {
 @include cssowl-absolute-outside(10px, 10px, middle, right);
 }
 > .bottom-center {
 @include cssowl-absolute-outside(10px, 10px, bottom, center);
 }
 > .middle-left {
 @include cssowl-absolute-outside(10px, 10px, middle, left);
 }
}

.example-absolute-outside {
 > .top-center {
 .cssowl-absolute-outside(10px, 10px, top, center);
 }
 > .middle-right {
 .cssowl-absolute-outside(10px, 10px, middle, right);
 }
 > .bottom-center {
 .cssowl-absolute-outside(10px, 10px, bottom, center);
 }
 > .middle-left {
 .cssowl-absolute-outside(10px, 10px, middle, left);
 }
}

.example-absolute-outside
 > .top-center
 cssowl-absolute-outside(10px, 10px, top, center)
 > .middle-right
 cssowl-absolute-outside(10px, 10px, middle, right)
 > .bottom-center
 cssowl-absolute-outside(10px, 10px, bottom, center)
 > .middle-left
 cssowl-absolute-outside(10px, 10px, middle, left)

After

cssowl-after-float

Mixin to add content with the :after pseudo selector and position it with float: $float.

Source 
// mixin
=cssowl-after-float($content, $margin:0 0 0 0, $float:right)
 &:after
 float: $float
 margin: $margin
 content: $content

// mixin
@mixin cssowl-after-float($content, $margin:0 0 0 0, $float:right) {
 &:after {
 float: $float;
 margin: $margin;
 content: $content;
 }
}

// mixin
.cssowl-after-float(@content, @margin:0 0 0 0, @float:right) {
 &:after {
 float: @float;
 margin: @margin;
 content: @content;
 }
}

// mixin
cssowl-after-float($content, $margin=0 0 0 0, $float=right)
 &:after
 float $float
 margin $margin
 content $content
Examples
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore. 
<div class='example-after-float'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</div>

<style>
 /* line 23, bower_components/cssowl/lib/sass/cssowl/after.sass */
 .example-after-float:after {
 float: right;
 margin: 4px 0 0 10px;
 content: "*"; }
</style>

.example-after-float
 +cssowl-after-float("*", 4px 0 0 10px)

.example-after-float {
 @include cssowl-after-float("*", 4px 0 0 10px);
}

.example-after-float {
 .cssowl-after-float("*", 4px 0 0 10px);
}

.example-after-float
 cssowl-after-float("*", 4px 0 0 10px)

cssowl-after-absolute

Mixin to add content with the :after pseudo selector and position it absolutely.

Source 
// mixin
=cssowl-after-absolute($content, $coordinates:0 false false 0)
 position: relative
 &:after
 content: $content
 +cssowl-absolute($coordinates)

// mixin
@mixin cssowl-after-absolute($content, $coordinates:0 false false 0) {
 position: relative;
 &:after {
 content: $content;
 @include cssowl-absolute($coordinates);
 }
}

// mixin
.cssowl-after-absolute(@content, @coordinates:0 false false 0) {
 position: relative;
 &:after {
 content: @content;
 .cssowl-absolute(@coordinates);
 }
}

// mixin
cssowl-after-absolute($content, $coordinates=0 false false 0)
 position: relative
 &:after
 content: $content
 cssowl-absolute($coordinates)
Examples 
<div class='example-after-absolute' style='width:50px;height:50px;border:1px solid #59371f;'></div>

<style>
 /* line 3, (__TEMPLATE__) */
 .example-after-absolute {
 position: relative; }
 /* line 17, bower_components/cssowl/lib/sass/cssowl/after.sass */
 .example-after-absolute:after {
 content: "*";
 top: 17px;
 left: 20px;
 position: absolute; }
</style>

.example-after-absolute
 +cssowl-after-absolute("*", 17px false false 20px)

.example-after-absolute {
 @include cssowl-after-absolute("*", 17px false false 20px);
}

.example-after-absolute {
 .cssowl-after-absolute("*", 17px false false 20px);
}

.example-after-absolute
 cssowl-after-absolute("*", 17px false false 20px)

cssowl-after-absolute-inside

Mixin to add content with the :after pseudo selector and position it absolutely inside the bounding box.

Source 
=cssowl-after-absolute-inside($content, $width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
 position: relative
 &:after
 content: $content
 +cssowl-absolute-inside($width, $height, $valign, $halign, $xOffset, $yOffset)

@mixin cssowl-after-absolute-inside($content, $width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
 position: relative;
 &:after {
 content: $content;
 @include cssowl-absolute-inside($width, $height, $valign, $halign, $xOffset, $yOffset);
 }
}

.cssowl-after-absolute-inside(@content, @width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
 position: relative;
 &:after {
 content: @content;
 .cssowl-absolute-inside(@width, @height, @valign, @halign, @xOffset, @yOffset);
 }
}

cssowl-after-absolute-inside($content, $width, $height, $valign=top, $halign=left, $xOffset=0, $yOffset=0)
 position: relative
 &:after
 content: $content
 cssowl-absolute-inside($width, $height, $valign, $halign, $xOffset, $yOffset)
Examples 
<div class='example-after-absolute-inside' style='width:50px;height:50px;border:1px solid #59371f;'></div>

<style>
 /* line 3, (__TEMPLATE__) */
 .example-after-absolute-inside {
 position: relative; }
 /* line 4, bower_components/cssowl/lib/sass/cssowl/after.sass */
 .example-after-absolute-inside:after {
 content: "*";
 width: 5px;
 height: 5px;
 position: absolute;
 top: 50%;
 margin-top: -5px;
 left: 50%;
 margin-left: -3px; }
</style>

.example-after-absolute-inside
 +cssowl-after-absolute-inside("*", 5px, 5px, middle, center, 0, -2px)

.example-after-absolute-inside {
 @include cssowl-after-absolute-inside("*", 5px, 5px, middle, center, 0, -2px);
}

.example-after-absolute-inside {
 .cssowl-after-absolute-inside("*", 5px, 5px, middle, center, 0, -2px);
}

.example-after-absolute-inside
 cssowl-after-absolute-inside("*", 5px, 5px, middle, center, 0, -2px)

cssowl-after-absolute-outside

Mixin to add content with the :after pseudo selector and position it absolutely outside the bounding box.

Source 
=cssowl-after-absolute-outside($content, $width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
 position: relative
 &:after
 content: $content
 +cssowl-absolute-outside($width, $height, $valign, $halign, $xOffset, $yOffset)

@mixin cssowl-after-absolute-outside($content, $width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
 position: relative;
 &:after {
 content: $content;
 @include cssowl-absolute-outside($width, $height, $valign, $halign, $xOffset, $yOffset);
 }
}

.cssowl-after-absolute-outside(@content, @width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
 position: relative;
 &:after {
 content: @content;
 .cssowl-absolute-outside(@width, @height, @valign, @halign, @xOffset, @yOffset);
 }
}

cssowl-after-absolute-outside($content, $width, $height, $valign=top, $halign=left, $xOffset=0, $yOffset=0)
 position: relative
 &:after
 content: $content
 cssowl-absolute-outside($width, $height, $valign, $halign, $xOffset, $yOffset)
Examples 
<div class='example-after-absolute-outside' style='width:50px;height:50px;border:1px solid #59371f;'></div>

<style>
 /* line 3, (__TEMPLATE__) */
 .example-after-absolute-outside {
 position: relative; }
 /* line 10, bower_components/cssowl/lib/sass/cssowl/after.sass */
 .example-after-absolute-outside:after {
 content: "*";
 width: 5px;
 height: 5px;
 position: absolute;
 top: 50%;
 margin-top: -5px;
 right: -10px; }
</style>

.example-after-absolute-outside
 +cssowl-after-absolute-outside("*", 5px, 5px, middle, right, -5px, -2px)

.example-after-absolute-outside {
 @include cssowl-after-absolute-outside("*", 5px, 5px, middle, right, -5px, -2px);
}

.example-after-absolute-outside {
 .cssowl-after-absolute-outside("*", 5px, 5px, middle, right, -5px, -2px);
}

.example-after-absolute-outside
 cssowl-after-absolute-outside("*", 5px, 5px, middle, right, -5px, -2px)

Before

cssowl-before-float

Mixin to add content with the :before pseudo selector and position it with float: $float.

Source 
// mixin
=cssowl-before-float($content, $margin:0 0 0 0, $float:left)
 &:before
 float: $float
 margin: $margin
 content: $content

// mixin
@mixin cssowl-before-float($content, $margin:0 0 0 0, $float:left) {
 &:before {
 float: $float;
 margin: $margin;
 content: $content;
 }
}

// mixin
.cssowl-before-float(@content, @margin:0 0 0 0, @float:left) {
 &:before {
 float: @float;
 margin: @margin;
 content: @content;
 }
}

// mixin
cssowl-before-float($content, $margin=0 0 0 0, $float=left)
 &:before
 float $float
 margin $margin
 content $content
Examples
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore. 
<div class='example-before-float'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</div>

<style>
 /* line 23, bower_components/cssowl/lib/sass/cssowl/before.sass */
 .example-before-float:before {
 float: left;
 margin: 4px 10px 0 0;
 content: "*"; }
</style>

.example-before-float
 +cssowl-before-float("*", 4px 10px 0 0)

.example-before-float {
 @include cssowl-before-float("*", 4px 10px 0 0);
}

.example-before-float {
 .cssowl-before-float("*", 4px 10px 0 0);
}

.example-before-float
 cssowl-before-float("*", 4px 10px 0 0)

cssowl-before-absolute

Mixin to add content with the :before pseudo selector and position it absolutely.

Source 
// mixin
=cssowl-before-absolute($content, $coordinates:0 false false 0)
 position: relative
 &:before
 content: $content
 +cssowl-absolute($coordinates)

// mixin
@mixin cssowl-before-absolute($content, $coordinates:0 false false 0) {
 position: relative;
 &:before {
 content: $content;
 @include cssowl-absolute($coordinates);
 }
}

// mixin
.cssowl-before-absolute(@content, @coordinates:0 false false 0) {
 position: relative;
 &:before {
 content: @content;
 .cssowl-absolute(@coordinates);
 }
}

// mixin
cssowl-before-absolute($content, $coordinates=0 false false 0)
 position: relative
 &:before
 content: $content
 cssowl-absolute($coordinates)
Examples 
<div class='example-before-absolute' style='width:50px;height:50px;border:1px solid #59371f;'></div>

<style>
 /* line 3, (__TEMPLATE__) */
 .example-before-absolute {
 position: relative; }
 /* line 17, bower_components/cssowl/lib/sass/cssowl/before.sass */
 .example-before-absolute:before {
 content: "*";
 top: 17px;
 left: 20px;
 position: absolute; }
</style>

.example-before-absolute
 +cssowl-before-absolute("*", 17px false false 20px)

.example-before-absolute {
 @include cssowl-before-absolute("*", 17px false false 20px);
}

.example-before-absolute {
 .cssowl-before-absolute("*", 17px false false 20px);
}

.example-before-absolute
 cssowl-before-absolute("*", 17px false false 20px)

cssowl-before-absolute-inside

Mixin to add content with the :before pseudo selector and position it absolutely inside the bounding box.

Source 
=cssowl-before-absolute-inside($content, $width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
 position: relative
 &:before
 content: $content
 +cssowl-absolute-inside($width, $height, $valign, $halign, $xOffset, $yOffset)

@mixin cssowl-before-absolute-inside($content, $width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
 position: relative;
 &:before {
 content: $content;
 @include cssowl-absolute-inside($width, $height, $valign, $halign, $xOffset, $yOffset);
 }
}

.cssowl-before-absolute-inside(@content, @width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
 position: relative;
 &:before {
 content: @content;
 .cssowl-absolute-inside(@width, @height, @valign, @halign, @xOffset, @yOffset);
 }
}

cssowl-before-absolute-inside($content, $width, $height, $valign=top, $halign=left, $xOffset=0, $yOffset=0)
 position: relative
 &:before
 content: $content
 cssowl-absolute-inside($width, $height, $valign, $halign, $xOffset, $yOffset)
Examples 
<div class='example-before-absolute-inside' style='width:50px;height:50px;border:1px solid #59371f;'></div>

<style>
 /* line 3, (__TEMPLATE__) */
 .example-before-absolute-inside {
 position: relative; }
 /* line 4, bower_components/cssowl/lib/sass/cssowl/before.sass */
 .example-before-absolute-inside:before {
 content: "*";
 width: 5px;
 height: 5px;
 position: absolute;
 top: 50%;
 margin-top: -5px;
 left: 50%;
 margin-left: -3px; }
</style>

.example-before-absolute-inside
 +cssowl-before-absolute-inside("*", 5px, 5px, middle, center, 0, -2px)

.example-before-absolute-inside {
 @include cssowl-before-absolute-inside("*", 5px, 5px, middle, center, 0, -2px);
}

.example-before-absolute-inside {
 .cssowl-before-absolute-inside("*", 5px, 5px, middle, center, 0, -2px);
}

.example-before-absolute-inside
 cssowl-before-absolute-inside("*", 5px, 5px, middle, center, 0, -2px)

cssowl-before-absolute-outside

Mixin to add content with the :before pseudo selector and position it absolutely outside the bounding box.

Source 
=cssowl-before-absolute-outside($content, $width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
 position: relative
 &:before
 content: $content
 +cssowl-absolute-outside($width, $height, $valign, $halign, $xOffset, $yOffset)

@mixin cssowl-before-absolute-outside($content, $width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
 position: relative;
 &:before {
 content: $content;
 @include cssowl-absolute-outside($width, $height, $valign, $halign, $xOffset, $yOffset);
 }
}

.cssowl-before-absolute-outside(@content, @width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
 position: relative;
 &:before {
 content: @content;
 .cssowl-absolute-outside(@width, @height, @valign, @halign, @xOffset, @yOffset);
 }
}

cssowl-before-absolute-outside($content, $width, $height, $valign=top, $halign=left, $xOffset=0, $yOffset=0)
 position: relative
 &:before
 content: $content
 cssowl-absolute-outside($width, $height, $valign, $halign, $xOffset, $yOffset)
Examples 
<div class='example-before-absolute-outside' style='width:50px;height:50px;border:1px solid #59371f;'></div>

<style>
 /* line 3, (__TEMPLATE__) */
 .example-before-absolute-outside {
 position: relative; }
 /* line 10, bower_components/cssowl/lib/sass/cssowl/before.sass */
 .example-before-absolute-outside:before {
 content: "*";
 width: 5px;
 height: 5px;
 position: absolute;
 top: 50%;
 margin-top: -5px;
 right: -10px; }
</style>

.example-before-absolute-outside
 +cssowl-before-absolute-outside("*", 5px, 5px, middle, right, -5px, -2px)

.example-before-absolute-outside {
 @include cssowl-before-absolute-outside("*", 5px, 5px, middle, right, -5px, -2px);
}

.example-before-absolute-outside {
 .cssowl-before-absolute-outside("*", 5px, 5px, middle, right, -5px, -2px);
}

.example-before-absolute-outside
 cssowl-before-absolute-outside("*", 5px, 5px, middle, right, -5px, -2px)

Coords

cssowl-coords

Set an element's top, right, bottom and left properties.

Source 
=cssowl-coords($coords:0 false false 0)
 $top: nth($coords, 1)
 $right: nth($coords, 2)
 $bottom: nth($coords, 3)
 $left: nth($coords, 4)
 @if $top != false
 top: $top
 @if $left != false
 left: $left
 @if $right != false
 right: $right
 @if $bottom != false
 bottom: $bottom

@mixin cssowl-coords($coords:0 false false 0) {
 $top: nth($coords, 1);
 $right: nth($coords, 2);
 $bottom: nth($coords, 3);
 $left: nth($coords, 4);
 @if $top != false {
 top: $top;
 }
 @if $left != false {
 left: $left;
 }
 @if $right != false {
 right: $right;
 }
 @if $bottom != false {
 bottom: $bottom;
 }
}

.cssowl-coords(@coords:0 false false 0) when not (extract(@coords, 1) = false) {
 top: extract(@coords, 1);
}
.cssowl-coords(@coords:0 false false 0) when not (extract(@coords, 2) = false) {
 right: extract(@coords, 2);
}
.cssowl-coords(@coords:0 false false 0) when not (extract(@coords, 3) = false) {
 bottom: extract(@coords, 3);
}
.cssowl-coords(@coords:0 false false 0) when not (extract(@coords, 4) = false) {
 left: extract(@coords, 4);
}
.cssowl-coords(@coords:0 false false 0) {
 // see conditionals
}

cssowl-coords($coords=0 false false 0)
 $top = $coords[0];
 $right = $coords[1];
 $bottom = $coords[2];
 $left = $coords[3];
 if $top != false
 top $top
 if $left != false
 left $left
 if $right != false
 right $right
 if $bottom != false
 bottom $bottom
Examples 
<div class='wrapper' style='position:relative;width:50px;height:50px;border:1px solid #59371f;'>
<div class='example-coords' style='width:10px;height:10px;background:#59371f;position:absolute;'></div>
</div>

<style>
 /* line 3, (__TEMPLATE__) */
 .example-coords {
 top: 20px;
 left: 20px; }
</style>

.example-coords
 +cssowl-coords(20px false false 20px)

.example-coords {
 @include cssowl-coords(20px false false 20px);
}

.example-coords {
 .cssowl-coords(20px false false 20px);
}

.example-coords
 cssowl-coords(20px false false 20px)

cssowl-coords-inside

Set an element's top, right, bottom and left properties to position it inside the bounding box.

Source 
=cssowl-coords-inside($width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
 @if $valign == top
 top: $yOffset
 @else if $valign == middle
 top: 50%
 margin-top: $yOffset - round($height / 2)
 @else if $valign == bottom
 bottom: $yOffset
 @if $halign == left
 left: $xOffset
 @else if $halign == center
 left: 50%
 margin-left: $xOffset - round($width / 2)
 @else if $halign == right
 right: $xOffset

@mixin cssowl-coords-inside($width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
 @if $valign == top {
 top: $yOffset;
 }
 @else if $valign == middle {
 top: 50%;
 margin-top: $yOffset - round($height / 2);
 }
 @else if $valign == bottom {
 bottom: $yOffset;
 }
 @if $halign == left {
 left: $xOffset;
 }
 @else if $halign == center {
 left: 50%;
 margin-left: $xOffset - round($width / 2);
 }
 @else if $halign == right {
 right: $xOffset;
 }
}

.cssowl-coords-inside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@valign = top) {
 top: @yOffset;
}
.cssowl-coords-inside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@valign = middle) {
 top: 50%;
 margin-top: @yOffset - round(@height / 2);
}
.cssowl-coords-inside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@valign = bottom) {
 bottom: @xOffset;
}
.cssowl-coords-inside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@halign = left) {
 left: @xOffset;
}
.cssowl-coords-inside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@halign = center) {
 left: 50%;
 margin-left: @xOffset - round(@width / 2);
}
.cssowl-coords-inside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@halign = right) {
 right: @xOffset;
}
.cssowl-coords-inside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
 // see conditionals
}

cssowl-coords-inside(width, height, valign=top, halign=left, xOffset=0, yOffset=0)
 if valign == top
 top yOffset
 else if valign == middle
 top 50%
 margin-top yOffset - round(height / 2)
 else if valign == bottom
 bottom yOffset
 if halign == left
 left xOffset
 else if halign == center
 left 50%
 margin-left xOffset - round(width / 2)
 else if halign == right
 right xOffset
Examples 
<div class='wrapper' style='position:relative;width:50px;height:50px;border:1px solid #59371f;'>
<div class='example-coords-inside top-center'></div>
<div class='example-coords-inside middle-right'></div>
<div class='example-coords-inside bottom-center'></div>
<div class='example-coords-inside middle-left'></div>
</div>

<style>
 /* line 3, (__TEMPLATE__) */
 .example-coords-inside {
 width: 10px;
 height: 10px;
 position: absolute;
 background: #59371f; }
 /* line 8, (__TEMPLATE__) */
 .example-coords-inside.top-center {
 top: 0;
 left: 50%;
 margin-left: -5px; }
 /* line 10, (__TEMPLATE__) */
 .example-coords-inside.middle-right {
 top: 50%;
 margin-top: -5px;
 right: 0; }
 /* line 12, (__TEMPLATE__) */
 .example-coords-inside.bottom-center {
 bottom: 0;
 left: 50%;
 margin-left: -5px; }
 /* line 14, (__TEMPLATE__) */
 .example-coords-inside.middle-left {
 top: 50%;
 margin-top: -5px;
 left: 0; }
</style>

.example-coords-inside
 width: 10px
 height: 10px
 position: absolute
 background: #59371f
 &.top-center
 +cssowl-coords-inside(10px, 10px, top, center)
 &.middle-right
 +cssowl-coords-inside(10px, 10px, middle, right)
 &.bottom-center
 +cssowl-coords-inside(10px, 10px, bottom, center)
 &.middle-left
 +cssowl-coords-inside(10px, 10px, middle, left)

.example-coords-inside {
 width: 10px;
 height: 10px;
 position: absolute;
 background: #59371f;
 &.top-center {
 @include cssowl-coords-inside(10px, 10px, top, center);
 }
 &.middle-right {
 @include cssowl-coords-inside(10px, 10px, middle, right);
 }
 &.bottom-center {
 @include cssowl-coords-inside(10px, 10px, bottom, center);
 }
 &.middle-left {
 @include cssowl-coords-inside(10px, 10px, middle, left);
 }
}

.example-coords-inside {
 width: 10px;
 height: 10px;
 position: absolute;
 background: #59371f;
 &.top-center {
 .cssowl-coords-inside(10px, 10px, top, center);
 }
 &.middle-right {
 .cssowl-coords-inside(10px, 10px, middle, right);
 }
 &.bottom-center {
 .cssowl-coords-inside(10px, 10px, bottom, center);
 }
 &.middle-left {
 .cssowl-coords-inside(10px, 10px, middle, left);
 }
}

.example-coords-inside
 width 10px
 height 10px
 position absolute
 background #59371f
 &.top-center
 cssowl-coords-inside(10px, 10px, top, center)
 &.middle-right
 cssowl-coords-inside(10px, 10px, middle, right)
 &.bottom-center
 cssowl-coords-inside(10px, 10px, bottom, center)
 &.middle-left
 cssowl-coords-inside(10px, 10px, middle, left)

cssowl-coords-outside

Set an element's top, right, bottom and left properties to position it outside the bounding box.

Source 
=cssowl-coords-outside($width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
 @if $valign == top
 top: round($yOffset - $height)
 @else if $valign == middle
 top: 50%
 margin-top: $yOffset - round($height / 2)
 @else if $valign == bottom
 bottom: round($yOffset - $height)
 @if $halign == left
 left: round($xOffset - $width)
 @else if $halign == center
 left: 50%
 margin-left: $xOffset - round($width / 2)
 @else if $halign == right
 right: round($xOffset - $width)

@mixin cssowl-coords-outside($width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
 @if $valign == top {
 top: round($yOffset - $height);
 }
 @else if $valign == middle {
 top: 50%;
 margin-top: $yOffset - round($height / 2);
 }
 @else if $valign == bottom {
 bottom: round($yOffset - $height);
 }
 @if $halign == left {
 left: round($xOffset - $width);
 }
 @else if $halign == center {
 left: 50%;
 margin-left: $xOffset - round($width / 2);
 }
 @else if $halign == right {
 right: round($xOffset - $width);
 }
}

.cssowl-coords-outside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@valign = top) {
 top: round(@yOffset - @height);
}
.cssowl-coords-outside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@valign = middle) {
 top: 50%;
 margin-top: @yOffset - round(@height / 2);
}
.cssowl-coords-outside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@valign = bottom) {
 bottom: round(@yOffset - @height);
}
.cssowl-coords-outside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@halign = left) {
 left: round(@xOffset - @width);
}
.cssowl-coords-outside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@halign = center) {
 left: 50%;
 margin-left: @xOffset - round(@width / 2);
}
.cssowl-coords-outside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@halign = right) {
 right: round(@xOffset - @width);
}
.cssowl-coords-outside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
 // see conditionals
}

cssowl-coords-outside(width, height, valign=top, halign=left, xOffset=0, yOffset=0)
 if valign == top
 top round(yOffset - height)
 else if valign == middle
 top 50%
 margin-top yOffset - round(height / 2)
 else if valign == bottom
 bottom round(yOffset - height)
 if halign == left
 left round(xOffset - width)
 else if halign == center
 left 50%
 margin-left xOffset - round(width / 2)
 else if halign == right
 right round(xOffset - width)
Examples 
<div class='wrapper' style='position:relative;width:50px;height:50px;border:1px solid #59371f;'>
<div class='example-coords-outside top-center'></div>
<div class='example-coords-outside middle-right'></div>
<div class='example-coords-outside bottom-center'></div>
<div class='example-coords-outside middle-left'></div>
</div>

<style>
 /* line 3, (__TEMPLATE__) */
 .example-coords-outside {
 width: 10px;
 height: 10px;
 position: absolute;
 background: #59371f; }
 /* line 8, (__TEMPLATE__) */
 .example-coords-outside.top-center {
 top: -10px;
 left: 50%;
 margin-left: -5px; }
 /* line 10, (__TEMPLATE__) */
 .example-coords-outside.middle-right {
 top: 50%;
 margin-top: -5px;
 right: -10px; }
 /* line 12, (__TEMPLATE__) */
 .example-coords-outside.bottom-center {
 bottom: -10px;
 left: 50%;
 margin-left: -5px; }
 /* line 14, (__TEMPLATE__) */
 .example-coords-outside.middle-left {
 top: 50%;
 margin-top: -5px;
 left: -10px; }
</style>

.example-coords-outside
 width: 10px
 height: 10px
 position: absolute
 background: #59371f
 &.top-center
 +cssowl-coords-outside(10px, 10px, top, center)
 &.middle-right
 +cssowl-coords-outside(10px, 10px, middle, right)
 &.bottom-center
 +cssowl-coords-outside(10px, 10px, bottom, center)
 &.middle-left
 +cssowl-coords-outside(10px, 10px, middle, left)

.example-coords-outside {
 width: 10px;
 height: 10px;
 position: absolute;
 background: #59371f;
 &.top-center {
 @include cssowl-coords-outside(10px, 10px, top, center);
 }
 &.middle-right {
 @include cssowl-coords-outside(10px, 10px, middle, right);
 }
 &.bottom-center {
 @include cssowl-coords-outside(10px, 10px, bottom, center);
 }
 &.middle-left {
 @include cssowl-coords-outside(10px, 10px, middle, left);
 }
}

.example-coords-outside {
 width: 10px;
 height: 10px;
 position: absolute;
 background: #59371f;
 &.top-center {
 .cssowl-coords-outside(10px, 10px, top, center);
 }
 &.middle-right {
 .cssowl-coords-outside(10px, 10px, middle, right);
 }
 &.bottom-center {
 .cssowl-coords-outside(10px, 10px, bottom, center);
 }
 &.middle-left {
 .cssowl-coords-outside(10px, 10px, middle, left);
 }
}

.example-coords-outside
 width 10px
 height 10px
 position absolute
 background #59371f
 &.top-center
 cssowl-coords-outside(10px, 10px, top, center)
 &.middle-right
 cssowl-coords-outside(10px, 10px, middle, right)
 &.bottom-center
 cssowl-coords-outside(10px, 10px, bottom, center)
 &.middle-left
 cssowl-coords-outside(10px, 10px, middle, left)

Relative

cssowl-relative

Extendable placeholder and mixin to position an element relatively.

Source 
// extendable placeholder
%cssowl-relative
 position: relative
// mixin
=cssowl-relative($coordinates:0 false false 0)
 +cssowl-coords($coordinates)
 position: relative

// extendable placeholder
%cssowl-relative {
 position: relative;
}
// mixin
@mixin cssowl-relative($coordinates:0 false false 0) {
 @include cssowl-coords($coordinates);
 position: relative;
}

// disabled as less doesn't provide placeholders yet
//.cssowl-relative {
// position: relative;
//}
// mixin
.cssowl-relative(@coordinates:0 false false 0) {
 .cssowl-coords(@coordinates);
 position: relative;
}

// extendable placeholder
$cssowl-relative
 position relative
// mixin
cssowl-relative($coordinates=0 false false 0)
 cssowl-coords($coordinates)
 position relative
Examples 
<div class='wrapper' style='position:relative;width:50px;height:50px;border:1px solid #59371f;'>
<div class='example-relative' style='width:10px;height:10px;background:#59371f;'></div>
</div>

<style>
 /* line 3, (__TEMPLATE__) */
 .example-relative {
 top: 20px;
 left: 20px;
 position: relative; }
</style>

.example-relative
 +cssowl-relative(20px false false 20px)

.example-relative {
 @include cssowl-relative(20px false false 20px);
}

.example-relative {
 .cssowl-relative(20px false false 20px);
}

.example-relative
 cssowl-relative(20px false false 20px)

Sprite

In order to use the following mixins, you need to define some variables and mixins which we usually place into a spritesheet. Take a look at the spritesheet below to see which variables and mixins are required. You can, of cause, write this spritesheet yourself but we recommend to check out our Spriteowl Photoshop Extension which will generate this spritesheet for you right out of Photoshop!

For the examples below we use this image as a sprite:

Spritesheet 
// variables for the sprite's image
$sprite-sheet-width: 136px !default
$sprite-sheet-height: 111px !default
$sprite-sheet-image: url("sprite.png") !default
$sprite-sheet-image-2x: url("sprite@2x.png") !default
$sprite-sheet: $sprite-sheet-width $sprite-sheet-height $sprite-sheet-image $sprite-sheet-image-2x sprite !default

=sprite-element()
 background-image: $sprite-sheet-image
 background-repeat: no-repeat
 @media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx)
 background-image: $sprite-sheet-image-2x
 background-size: $sprite-sheet-width $sprite-sheet-height
%sprite-element
 +sprite-element()

// variables for each of the sprite's elements
$sprite-owl-up-x: -93px !default
$sprite-owl-up-y: 0 !default
$sprite-owl-up-width: 16px !default
$sprite-owl-up-height: 16px !default
$sprite-owl-up: $sprite-owl-up-x $sprite-owl-up-y $sprite-owl-up-width $sprite-owl-up-height sprite-owl-up !default

=sprite-owl-up-width()
 width: $sprite-owl-up-width
%sprite-owl-up-width
 +sprite-owl-up-width()
=sprite-owl-up-height()
 height: $sprite-owl-up-height
%sprite-owl-up-height
 +sprite-owl-up-height()
=sprite-owl-up-size()
 +sprite-owl-up-width()
 +sprite-owl-up-height()
%sprite-owl-up-size
 +sprite-owl-up-size()
=sprite-owl-up-position()
 background-position: $sprite-owl-up-x $sprite-owl-up-y
%sprite-owl-up-position
 +sprite-owl-up-position()
=sprite-owl-up-adjust()
 +sprite-owl-up-size()
 +sprite-owl-up-position()
%sprite-owl-up-adjust
 +sprite-owl-up-adjust()
=sprite-owl-up()
 +sprite-owl-up-adjust()
 @extend %sprite-element
%sprite-owl-up
 +sprite-owl-up()

// ...

// variables for the sprite's image
$sprite-sheet-width: 136px !default;
$sprite-sheet-height: 111px !default;
$sprite-sheet-image: url("sprite.png") !default;
$sprite-sheet-image-2x: url("sprite@2x.png") !default;
$sprite-sheet: $sprite-sheet-width $sprite-sheet-height $sprite-sheet-image $sprite-sheet-image-2x sprite !default;

@mixin sprite-element() {
 background-image: $sprite-sheet-image;
 background-repeat: no-repeat;
 @media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
 background-image: $sprite-sheet-image-2x;
 background-size: $sprite-sheet-width $sprite-sheet-height;
 }
}
%sprite-element {
 @include sprite-element();
}


// variables for each of the sprite's elements
$sprite-owl-up-x: -93px !default;
$sprite-owl-up-y: 0 !default;
$sprite-owl-up-width: 16px !default;
$sprite-owl-up-height: 16px !default;
$sprite-owl-up: $sprite-owl-up-x $sprite-owl-up-y $sprite-owl-up-width $sprite-owl-up-height sprite-owl-up !default;

@mixin sprite-owl-up-width() {
 width: $sprite-owl-up-width;
}
%sprite-owl-up-width {
 @include sprite-owl-up-width();
}
@mixin sprite-owl-up-height() {
 height: $sprite-owl-up-height;
}
%sprite-owl-up-height {
 @include sprite-owl-up-height();
}
@mixin sprite-owl-up-size() {
 @include sprite-owl-up-width();
 @include sprite-owl-up-height();
}
%sprite-owl-up-size {
 @include sprite-owl-up-size();
}
@mixin sprite-owl-up-position() {
 background-position: $sprite-owl-up-x $sprite-owl-up-y;
}
%sprite-owl-up-position {
 @include sprite-owl-up-position();
}
@mixin sprite-owl-up-adjust() {
 @include sprite-owl-up-size();
 @include sprite-owl-up-position();
}
%sprite-owl-up-adjust {
 @include sprite-owl-up-adjust();
}
@mixin sprite-owl-up() {
 @include sprite-owl-up-adjust();
 @extend %sprite-element;
}
%sprite-owl-up {
 @include sprite-owl-up();
}

// ...

// variables for the sprite's image
@sprite-sheet-width: 136px;
@sprite-sheet-height: 111px;
@sprite-sheet-image: url("sprite.png");
@sprite-sheet-image-2x: url("sprite@2x.png");
@sprite-sheet: @sprite-sheet-width @sprite-sheet-height @sprite-sheet-image @sprite-sheet-image-2x sprite;

.sprite-element() {
 background-image: @sprite-sheet-image;
 background-repeat: no-repeat;
 @media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
 background-image: @sprite-sheet-image-2x;
 background-size: @sprite-sheet-width @sprite-sheet-height;
 }
}
.sprite-element {
 .sprite-element();
}

// variables for each of the sprite's elements
@sprite-owl-up-x: -93px;
@sprite-owl-up-y: 0;
@sprite-owl-up-width: 16px;
@sprite-owl-up-height: 16px;
@sprite-owl-up: @sprite-owl-up-x @sprite-owl-up-y @sprite-owl-up-width @sprite-owl-up-height sprite-owl-up;

.sprite-owl-up-width() {
 width: @sprite-owl-up-width;
}
.sprite-owl-up-height() {
 height: @sprite-owl-up-height;
}
.sprite-owl-up-size() {
 .sprite-owl-up-width();
 .sprite-owl-up-height();
}
.sprite-owl-up-position() {
 background-position: @sprite-owl-up-x @sprite-owl-up-y;
}
.sprite-owl-up-adjust() {
 .sprite-owl-up-size();
 .sprite-owl-up-position();
}
.sprite-owl-up() {
 .sprite-owl-up-adjust();
 &:extend(.sprite-element);
}
.less-sprite-element(sprite-owl-up) {
 .sprite-owl-up()
}

// ...

// variables for the sprite's image
$sprite-sheet-width ?= 136px
$sprite-sheet-height ?= 111px
$sprite-sheet-image ?= url("sprite.png")
$sprite-sheet-image-2x ?= url("sprite@2x.png")
$sprite-sheet ?= $sprite-sheet-width $sprite-sheet-height $sprite-sheet-image-2x $sprite-sheet-image-2x sprite

sprite-element()
 background-image: $sprite-sheet-image
 background-repeat: no-repeat
 @media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx)
 background-image: $sprite-sheet-image-2x
 background-size: $sprite-sheet-width $sprite-sheet-height
$sprite-element
 sprite-element()

// variables for each of the sprite's elements
$sprite-owl-up-x ?= -93px
$sprite-owl-up-y ?= 0
$sprite-owl-up-width ?= 16px
$sprite-owl-up-height ?= 16px
$sprite-owl-up ?= $sprite-owl-up-x $sprite-owl-up-y $sprite-owl-up-width $sprite-owl-up-height sprite-owl-up

sprite-owl-up-width()
 width: $sprite-owl-up-width
$sprite-owl-up-width
 sprite-owl-up-width()
sprite-owl-up-height()
 height: $sprite-owl-up-height
$sprite-owl-up-height
 sprite-owl-up-height()
sprite-owl-up-size()
 sprite-owl-up-width()
 sprite-owl-up-height()
$sprite-owl-up-size
 sprite-owl-up-size()
sprite-owl-up-position()
 background-position: $sprite-owl-up-x $sprite-owl-up-y
$sprite-owl-up-position
 sprite-owl-up-position()
sprite-owl-up-adjust()
 sprite-owl-up-size()
 sprite-owl-up-position()
$sprite-owl-up-adjust
 sprite-owl-up-adjust()
sprite-owl-up()
 sprite-owl-up-adjust()
 @extend $sprite-element
$sprite-owl-up
 sprite-owl-up()

// ...

cssowl-sprite-display

Add a sprite element with its width, height, background-image and background-position.

Source 
@mixin cssowl-sprite-display($element, $display:inline-block)
 display: $display
 @extend %#{nth($element, 5)}


@mixin cssowl-sprite-display($element, $display:inline-block) {
 display: $display;
 @extend %#{nth($element, 5)};
}


.cssowl-sprite-display(@element, @display:inline-block) {
 display: @display;
 .less-sprite-element(extract(@element, 5));
}

cssowl-sprite-display($element, $display=inline-block)
 display $display
 @extend ${$element[4]}
Examples
Lorem ipsum dolor sit atem 
Lorem <span class="example-sprite-display"></span> ipsum dolor sit atem

<style>
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-display {
 background-image: url("sprite.png");
 background-repeat: no-repeat; }
 @media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-display {
 background-image: url("sprite@2x.png");
 background-size: 136px 111px; } }
 
 /* line 275, source/assets/css/site/_sprite.sass */
 .example-sprite-display {
 width: 16px;
 height: 16px;
 background-position: -93px 0; }
 
 /* line 3, (__TEMPLATE__) */
 .example-sprite-display {
 display: inline-block; }
</style>

.example-sprite-display
 +cssowl-sprite-display($sprite-owl-up)

.example-sprite-display {
 @include cssowl-sprite-display($sprite-owl-up);
}

.example-sprite-display {
 .cssowl-sprite-display(@sprite-owl-up);
}

.example-sprite-display
 cssowl-sprite-display($sprite-owl-up)

cssowl-sprite-replace

Add a sprite element and hide the element's content.

Source 
@mixin cssowl-sprite-replace($element)
 @extend %cssowl-text-hide
 @extend %#{nth($element, 5)}


@mixin cssowl-sprite-replace($element) {
 @extend %cssowl-text-hide;
 @extend %#{nth($element, 5)};
}


.cssowl-sprite-replace(@element) {
 .cssowl-text-hide();
 .less-sprite-element(extract(@element, 5));
}

cssowl-sprite-replace($element)
 @extend $cssowl-text-hide
 @extend ${$element[4]}
Examples
Lorem ipsum dolor sit atem 
Lorem <span class="example-replace">ipsum</span> dolor sit atem

<style>
 /* line 9, bower_components/cssowl/lib/sass/cssowl/text.sass */
 .example-replace {
 overflow: hidden;
 text-indent: 1000%;
 white-space: nowrap;
 display: inline-block; }
 
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-replace {
 background-image: url("sprite.png");
 background-repeat: no-repeat; }
 @media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-replace {
 background-image: url("sprite@2x.png");
 background-size: 136px 111px; } }
 
 /* line 275, source/assets/css/site/_sprite.sass */
 .example-replace {
 width: 16px;
 height: 16px;
 background-position: -93px 0; }
</style>

.example-replace
 +cssowl-sprite-replace($sprite-owl-up)

.example-replace {
 @include cssowl-sprite-replace($sprite-owl-up);
}

.example-replace {
 .cssowl-sprite-replace(@sprite-owl-up);
}

.example-replace
 cssowl-sprite-replace($sprite-owl-up)

cssowl-sprite-absolute

Place a sprite element with position: absolute;.

Source 
=cssowl-sprite-absolute($element, $coordinates:0 false false 0)
 +cssowl-absolute($coordinates)
 @extend %#{nth($element, 5)}


@mixin cssowl-sprite-absolute($element, $coordinates:0 false false 0) {
 @include cssowl-absolute($coordinates);
 @extend %#{nth($element, 5)};
}


.cssowl-sprite-absolute(@element, @coordinates:0 false false 0) {
 .cssowl-absolute(@coordinates);
 .less-sprite-element(extract(@element, 5));
}

cssowl-sprite-absolute($element, $coordinates=0 false false 0)
 cssowl-absolute($coordinates)
 @extend ${$element[4]}
Examples 
<div class='wrapper' style='position:relative;width:50px;height:50px;border:1px solid #59371f;'>
<div class='example-sprite-absolute'></div>
</div>

<style>
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-absolute {
 background-image: url("sprite.png");
 background-repeat: no-repeat; }
 @media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-absolute {
 background-image: url("sprite@2x.png");
 background-size: 136px 111px; } }
 
 /* line 275, source/assets/css/site/_sprite.sass */
 .example-sprite-absolute {
 width: 16px;
 height: 16px;
 background-position: -93px 0; }
 
 /* line 3, (__TEMPLATE__) */
 .example-sprite-absolute {
 top: 10px;
 left: 10px;
 right: 0;
 bottom: 0;
 position: absolute; }
</style>

.example-sprite-absolute
 +cssowl-sprite-absolute($sprite-owl-up, 10px 0 0 10px)

.example-sprite-absolute {
 @include cssowl-sprite-absolute($sprite-owl-up, 10px 0 0 10px);
}

.example-sprite-absolute {
 .cssowl-sprite-absolute(@sprite-owl-up, 10px 0 0 10px);
}

.example-sprite-absolute
 cssowl-sprite-absolute($sprite-owl-up, 10px 0 0 10px)

cssowl-sprite-absolute-inside

Place a sprite element with position: absolute; inside the bounding box.

Source 
=cssowl-sprite-absolute-inside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
 +cssowl-absolute-inside(nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset)
 @extend %#{nth($element, 5)}


@mixin cssowl-sprite-absolute-inside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
 @include cssowl-absolute-inside(nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset);
 @extend %#{nth($element, 5)};
}


.cssowl-sprite-absolute-inside(@element, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
 .cssowl-absolute-inside(extract(@element, 3), extract(@element, 4), @valign, @halign, @xOffset, @yOffset);
 .less-sprite-element(extract(@element, 5));
}

cssowl-sprite-absolute-inside($element, $valign=top, $halign=left, $xOffset=0, $yOffset=0)
 cssowl-absolute-inside($element[2], $element[3], $valign, $halign, $xOffset, $yOffset)
 @extend ${$element[4]}
Examples 
<div class='example-sprite-absolute-inside' style='position:relative;width:50px;height:50px;border:1px solid #59371f;'>
<div class='top-center'></div>
<div class='middle-right'></div>
<div class='bottom-center'></div>
<div class='middle-left'></div>
</div>

<style>
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-absolute-inside > .bottom-center, .example-sprite-absolute-inside > .middle-left, .example-sprite-absolute-inside > .top-center, .example-sprite-absolute-inside > .middle-right {
 background-image: url("sprite.png");
 background-repeat: no-repeat; }
 @media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-absolute-inside > .bottom-center, .example-sprite-absolute-inside > .middle-left, .example-sprite-absolute-inside > .top-center, .example-sprite-absolute-inside > .middle-right {
 background-image: url("sprite@2x.png");
 background-size: 136px 111px; } }
 
 /* line 155, source/assets/css/site/_sprite.sass */
 .example-sprite-absolute-inside > .bottom-center {
 width: 11px;
 height: 6px;
 background-position: -96px -37px; }
 
 /* line 185, source/assets/css/site/_sprite.sass */
 .example-sprite-absolute-inside > .middle-left {
 width: 6px;
 height: 11px;
 background-position: -98px -76px; }
 
 /* line 215, source/assets/css/site/_sprite.sass */
 .example-sprite-absolute-inside > .top-center {
 width: 11px;
 height: 6px;
 background-position: -96px -50px; }
 
 /* line 245, source/assets/css/site/_sprite.sass */
 .example-sprite-absolute-inside > .middle-right {
 width: 6px;
 height: 11px;
 background-position: -98px -61px; }
 
 /* line 4, (__TEMPLATE__) */
 .example-sprite-absolute-inside > .top-center {
 width: 11px;
 height: 6px;
 position: absolute;
 top: 0;
 left: 50%;
 margin-left: -6px; }
 /* line 6, (__TEMPLATE__) */
 .example-sprite-absolute-inside > .middle-right {
 width: 6px;
 height: 11px;
 position: absolute;
 top: 50%;
 margin-top: -6px;
 right: 0; }
 /* line 8, (__TEMPLATE__) */
 .example-sprite-absolute-inside > .bottom-center {
 width: 11px;
 height: 6px;
 position: absolute;
 bottom: 0;
 left: 50%;
 margin-left: -6px; }
 /* line 10, (__TEMPLATE__) */
 .example-sprite-absolute-inside > .middle-left {
 width: 6px;
 height: 11px;
 position: absolute;
 top: 50%;
 margin-top: -6px;
 left: 0; }
</style>

.example-sprite-absolute-inside
 > .top-center
 +cssowl-sprite-absolute-inside($sprite-arrow-down, top, center)
 > .middle-right
 +cssowl-sprite-absolute-inside($sprite-arrow-left, middle, right)
 > .bottom-center
 +cssowl-sprite-absolute-inside($sprite-arrow-up, bottom, center)
 > .middle-left
 +cssowl-sprite-absolute-inside($sprite-arrow-right, middle, left)

.example-sprite-absolute-inside {
 > .top-center {
 @include cssowl-sprite-absolute-inside($sprite-arrow-down, top, center);
 }
 > .middle-right {
 @include cssowl-sprite-absolute-inside($sprite-arrow-left, middle, right);
 }
 > .bottom-center {
 @include cssowl-sprite-absolute-inside($sprite-arrow-up, bottom, center);
 }
 > .middle-left {
 @include cssowl-sprite-absolute-inside($sprite-arrow-right, middle, left);
 }
}

.example-sprite-absolute-inside {
 > .top-center {
 .cssowl-sprite-absolute-inside(@sprite-arrow-down, top, center);
 }
 > .middle-right {
 .cssowl-sprite-absolute-inside(@sprite-arrow-left, middle, right);
 }
 > .bottom-center {
 .cssowl-sprite-absolute-inside(@sprite-arrow-up, bottom, center);
 }
 > .middle-left {
 .cssowl-sprite-absolute-inside(@sprite-arrow-right, middle, left);
 }
}

.example-sprite-absolute-inside
 > .top-center
 cssowl-sprite-absolute-inside($sprite-arrow-down, top, center)
 > .middle-right
 cssowl-sprite-absolute-inside($sprite-arrow-left, middle, right)
 > .bottom-center
 cssowl-sprite-absolute-inside($sprite-arrow-up, bottom, center)
 > .middle-left
 cssowl-sprite-absolute-inside($sprite-arrow-right, middle, left)

cssowl-sprite-absolute-outside

Place a sprite element with position: absolute; outside the bounding box.

Source 
=cssowl-sprite-absolute-outside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
 +cssowl-absolute-outside(nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset)
 @extend %#{nth($element, 5)}


@mixin cssowl-sprite-absolute-outside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
 @include cssowl-absolute-outside(nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset);
 @extend %#{nth($element, 5)};
}


.cssowl-sprite-absolute-outside(@element, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
 .cssowl-absolute-outside(extract(@element, 3), extract(@element, 4), @valign, @halign, @xOffset, @yOffset);
 .less-sprite-element(extract(@element, 5));
}

cssowl-sprite-absolute-outside($element, $valign=top, $halign=left, $xOffset=0, $yOffset=0)
 cssowl-absolute-outside($element[2], $element[3], $valign, $halign, $xOffset, $yOffset)
 @extend ${$element[4]}
Examples 
<div class='example-sprite-absolute-outside' style='position:relative;width:50px;height:50px;border:1px solid #59371f;'>
<div class='top-center'></div>
<div class='middle-right'></div>
<div class='bottom-center'></div>
<div class='middle-left'></div>
</div>

<style>
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-absolute-outside > .top-center, .example-sprite-absolute-outside > .middle-right, .example-sprite-absolute-outside > .bottom-center, .example-sprite-absolute-outside > .middle-left {
 background-image: url("sprite.png");
 background-repeat: no-repeat; }
 @media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-absolute-outside > .top-center, .example-sprite-absolute-outside > .middle-right, .example-sprite-absolute-outside > .bottom-center, .example-sprite-absolute-outside > .middle-left {
 background-image: url("sprite@2x.png");
 background-size: 136px 111px; } }
 
 /* line 155, source/assets/css/site/_sprite.sass */
 .example-sprite-absolute-outside > .top-center {
 width: 11px;
 height: 6px;
 background-position: -96px -37px; }
 
 /* line 185, source/assets/css/site/_sprite.sass */
 .example-sprite-absolute-outside > .middle-right {
 width: 6px;
 height: 11px;
 background-position: -98px -76px; }
 
 /* line 215, source/assets/css/site/_sprite.sass */
 .example-sprite-absolute-outside > .bottom-center {
 width: 11px;
 height: 6px;
 background-position: -96px -50px; }
 
 /* line 245, source/assets/css/site/_sprite.sass */
 .example-sprite-absolute-outside > .middle-left {
 width: 6px;
 height: 11px;
 background-position: -98px -61px; }
 
 /* line 4, (__TEMPLATE__) */
 .example-sprite-absolute-outside > .top-center {
 width: 11px;
 height: 6px;
 position: absolute;
 top: -6px;
 left: 50%;
 margin-left: -6px; }
 /* line 6, (__TEMPLATE__) */
 .example-sprite-absolute-outside > .middle-right {
 width: 6px;
 height: 11px;
 position: absolute;
 top: 50%;
 margin-top: -6px;
 right: -6px; }
 /* line 8, (__TEMPLATE__) */
 .example-sprite-absolute-outside > .bottom-center {
 width: 11px;
 height: 6px;
 position: absolute;
 bottom: -6px;
 left: 50%;
 margin-left: -6px; }
 /* line 10, (__TEMPLATE__) */
 .example-sprite-absolute-outside > .middle-left {
 width: 6px;
 height: 11px;
 position: absolute;
 top: 50%;
 margin-top: -6px;
 left: -6px; }
</style>

.example-sprite-absolute-outside
 > .top-center
 +cssowl-sprite-absolute-outside($sprite-arrow-up, top, center)
 > .middle-right
 +cssowl-sprite-absolute-outside($sprite-arrow-right, middle, right)
 > .bottom-center
 +cssowl-sprite-absolute-outside($sprite-arrow-down, bottom, center)
 > .middle-left
 +cssowl-sprite-absolute-outside($sprite-arrow-left, middle, left)

.example-sprite-absolute-outside {
 > .top-center {
 @include cssowl-sprite-absolute-outside($sprite-arrow-up, top, center);
 }
 > .middle-right {
 @include cssowl-sprite-absolute-outside($sprite-arrow-right, middle, right);
 }
 > .bottom-center {
 @include cssowl-sprite-absolute-outside($sprite-arrow-down, bottom, center);
 }
 > .middle-left {
 @include cssowl-sprite-absolute-outside($sprite-arrow-left, middle, left);
 }
}

.example-sprite-absolute-outside {
 > .top-center {
 .cssowl-sprite-absolute-outside(@sprite-arrow-up, top, center);
 }
 > .middle-right {
 .cssowl-sprite-absolute-outside(@sprite-arrow-right, middle, right);
 }
 > .bottom-center {
 .cssowl-sprite-absolute-outside(@sprite-arrow-down, bottom, center);
 }
 > .middle-left {
 .cssowl-sprite-absolute-outside(@sprite-arrow-left, middle, left);
 }
}

.example-sprite-absolute-outside
 > .top-center
 cssowl-sprite-absolute-outside($sprite-arrow-up, top, center)
 > .middle-right
 cssowl-sprite-absolute-outside($sprite-arrow-right, middle, right)
 > .bottom-center
 cssowl-sprite-absolute-outside($sprite-arrow-down, bottom, center)
 > .middle-left
 cssowl-sprite-absolute-outside($sprite-arrow-left, middle, left)

cssowl-sprite-after

Add a sprite element with the :after pseudo selector.

Source 
=cssowl-sprite-after($element, $margin:0 0 0 0, $display:inline-block)
 &:after
 content: ""
 margin: $margin
 display: $display
 @extend %#{nth($element, 5)}


@mixin cssowl-sprite-after($element, $margin:0 0 0 0, $display:inline-block) {
 &:after {
 content: "";
 margin: $margin;
 display: $display;
 @extend %#{nth($element, 5)};
 }
}


.cssowl-sprite-after(@element, @margin:0 0 0 0, @display:inline-block) {
 &:after {
 content: "";
 margin: @margin;
 display: @display;
 .less-sprite-element(extract(@element, 5));
 }
}

cssowl-sprite-after($element, $margin=0 0 0 0, $display=inline-block)
 &:after
 content ""
 margin $margin
 display $display
 @extend ${$element[4]}
Examples
Quia sint quis nam et quia ducimus consequatur cumque.
<div class='example-sprite-after'>Quia sint quis nam et quia ducimus consequatur cumque.</div>

<style>
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-after:after {
 background-image: url("sprite.png");
 background-repeat: no-repeat; }
 @media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-after:after {
 background-image: url("sprite@2x.png");
 background-size: 136px 111px; } }
 
 /* line 275, source/assets/css/site/_sprite.sass */
 .example-sprite-after:after {
 width: 16px;
 height: 16px;
 background-position: -93px 0; }
 
 /* line 35, bower_components/cssowl/lib/sass/cssowl/sprite.sass */
 .example-sprite-after:after {
 content: "";
 margin: 0 0 -2px 10px;
 display: inline-block; }
</style>

.example-sprite-after
 +cssowl-sprite-after($sprite-owl-up, 0 0 -2px 10px)

.example-sprite-after {
 @include cssowl-sprite-after($sprite-owl-up, 0 0 -2px 10px);
}

.example-sprite-after {
 .cssowl-sprite-after(@sprite-owl-up, 0 0 -2px 10px);
}

.example-sprite-after
 cssowl-sprite-after($sprite-owl-up, 0 0 -2px 10px)

cssowl-sprite-after-float

Add a sprite element with the :after pseudo selector and place it with the float attribute.

Source 
=cssowl-sprite-after-float($element, $margin:0 0 0 0, $float:right)
 +cssowl-after-float("", $margin, $float)
 &:after
 @extend %#{nth($element, 5)}


@mixin cssowl-sprite-after-float($element, $margin:0 0 0 0, $float:right) {
 @include cssowl-after-float("", $margin, $float);
 &:after {
 @extend %#{nth($element, 5)};
 }
}


.cssowl-sprite-after-float(@element, @margin:0 0 0 0, @float:right) {
 .cssowl-after-float("", @margin, @float);
 &:after {
 .less-sprite-element(extract(@element, 5));
 }
}

cssowl-sprite-after-float($element, $margin=0 0 0 0, $float=right)
 cssowl-after-float("", $margin, $float)
 &:after
 @extend ${$element[4]}
Examples
Quia sint quis nam et quia ducimus consequatur cumque.
<div class='example-sprite-after-float'>Quia sint quis nam et quia ducimus consequatur cumque.</div>

<style>
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-after-float:after {
 background-image: url("sprite.png");
 background-repeat: no-repeat; }
 @media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-after-float:after {
 background-image: url("sprite@2x.png");
 background-size: 136px 111px; } }
 
 /* line 275, source/assets/css/site/_sprite.sass */
 .example-sprite-after-float:after {
 width: 16px;
 height: 16px;
 background-position: -93px 0; }
 
 /* line 23, bower_components/cssowl/lib/sass/cssowl/after.sass */
 .example-sprite-after-float:after {
 float: right;
 margin: 0 5px 0 0;
 content: ""; }
</style>

.example-sprite-after-float
 +cssowl-sprite-after-float($sprite-owl-up, 0 5px 0 0)

.example-sprite-after-float {
 @include cssowl-sprite-after-float($sprite-owl-up, 0 5px 0 0);
}

.example-sprite-after-float {
 .cssowl-sprite-after-float(@sprite-owl-up, 0 5px 0 0);
}

.example-sprite-after-float
 cssowl-sprite-after-float($sprite-owl-up, 0 5px 0 0)

cssowl-sprite-after-absolute

Add a sprite element with the :after pseudo selector and place it absolutely.

Source 
=cssowl-sprite-after-absolute($element, $coordinates:0 false false 0)
 +cssowl-after-absolute("", $coordinates)
 &:after
 @extend %#{nth($element, 5)}


@mixin cssowl-sprite-after-absolute($element, $coordinates:0 false false 0) {
 @include cssowl-after-absolute("", $coordinates);
 &:after {
 @extend %#{nth($element, 5)};
 }
}


.cssowl-sprite-after-absolute(@element, @coordinates:0 false false 0) {
 .cssowl-after-absolute("", @coordinates);
 &:after {
 .less-sprite-element(extract(@element, 5));
 }
}

cssowl-sprite-after-absolute($element, $coordinates=0 false false 0)
 cssowl-after-absolute("", $coordinates)
 &:after
 @extend ${$element[4]}
Examples
Quia sint quis nam et quia ducimus consequatur cumque.
<div class='example-sprite-after-absolute' style='margin-right:20px;'>Quia sint quis nam et quia ducimus consequatur cumque.</div>

<style>
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-after-absolute:after {
 background-image: url("sprite.png");
 background-repeat: no-repeat; }
 @media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-after-absolute:after {
 background-image: url("sprite@2x.png");
 background-size: 136px 111px; } }
 
 /* line 275, source/assets/css/site/_sprite.sass */
 .example-sprite-after-absolute:after {
 width: 16px;
 height: 16px;
 background-position: -93px 0; }
 
 /* line 3, (__TEMPLATE__) */
 .example-sprite-after-absolute {
 position: relative; }
 /* line 17, bower_components/cssowl/lib/sass/cssowl/after.sass */
 .example-sprite-after-absolute:after {
 content: "";
 top: 2px;
 right: -20px;
 position: absolute; }
</style>

.example-sprite-after-absolute
 +cssowl-sprite-after-absolute($sprite-owl-up, 2px -20px false false)

.example-sprite-after-absolute {
 @include cssowl-sprite-after-absolute($sprite-owl-up, 2px -20px false false);
}

.example-sprite-after-absolute {
 .cssowl-sprite-after-absolute(@sprite-owl-up, 2px -20px false false);
}

.example-sprite-after-absolute
 cssowl-sprite-after-absolute($sprite-owl-up, 2px -20px false false)

cssowl-sprite-after-absolute-inside

Add a sprite element with the :after pseudo selector and place it absolutely inside the bounding box.

Source 
=cssowl-sprite-after-absolute-inside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
 +cssowl-after-absolute-inside("", nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset)
 &:after
 @extend %#{nth($element, 5)}


@mixin cssowl-sprite-after-absolute-inside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
 @include cssowl-after-absolute-inside("", nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset);
 &:after {
 @extend %#{nth($element, 5)};
 }
}


.cssowl-sprite-after-absolute-inside(@element, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
 .cssowl-after-absolute-inside("", extract(@element, 3), extract(@element, 4), @valign, @halign, @xOffset, @yOffset);
 &:after {
 .less-sprite-element(extract(@element, 5));
 }
}

cssowl-sprite-after-absolute-inside($element, $valign=top, $halign=left, $xOffset=0, $yOffset=0)
 cssowl-after-absolute-inside("", $element[2], $element[3], $valign, $halign, $xOffset, $yOffset)
 &:after
 @extend ${$element[4]}
Examples
Quia sint quis
<div class='example-sprite-after-absolute-inside' style='display:inline-block;border-top:1px solid #59371f;padding-top: 5px;'>Quia sint quis</div>

<style>
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-after-absolute-inside:after {
 background-image: url("sprite.png");
 background-repeat: no-repeat; }
 @media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-after-absolute-inside:after {
 background-image: url("sprite@2x.png");
 background-size: 136px 111px; } }
 
 /* line 215, source/assets/css/site/_sprite.sass */
 .example-sprite-after-absolute-inside:after {
 width: 11px;
 height: 6px;
 background-position: -96px -50px; }
 
 /* line 3, (__TEMPLATE__) */
 .example-sprite-after-absolute-inside {
 position: relative; }
 /* line 4, bower_components/cssowl/lib/sass/cssowl/after.sass */
 .example-sprite-after-absolute-inside:after {
 content: "";
 width: 11px;
 height: 6px;
 position: absolute;
 top: 0;
 left: 50%;
 margin-left: -6px; }
</style>

.example-sprite-after-absolute-inside
 +cssowl-sprite-after-absolute-inside($sprite-arrow-down, top, center)

.example-sprite-after-absolute-inside {
 @include cssowl-sprite-after-absolute-inside($sprite-arrow-down, top, center);
}

.example-sprite-after-absolute-inside {
 .cssowl-sprite-after-absolute-inside(@sprite-arrow-down, top, center);
}

.example-sprite-after-absolute-inside
 cssowl-sprite-after-absolute-inside($sprite-arrow-down, top, center)

cssowl-sprite-after-absolute-outside

Add a sprite element with the :after pseudo selector and place it absolutely outside the bounding box.

Source 
=cssowl-sprite-after-absolute-outside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0, $float:left)
 +cssowl-after-absolute-outside("", nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset)
 &:after
 @extend %#{nth($element, 5)}


@mixin cssowl-sprite-after-absolute-outside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0, $float:left) {
 @include cssowl-after-absolute-outside("", nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset);
 &:after {
 @extend %#{nth($element, 5)};
 }
}


.cssowl-sprite-after-absolute-outside(@element, @valign:top, @halign:left, @xOffset:0, @yOffset:0, @float:left) {
 .cssowl-after-absolute-outside("", extract(@element, 3), extract(@element, 4), @valign, @halign, @xOffset, @yOffset);
 &:after {
 .less-sprite-element(extract(@element, 5));
 }
}

cssowl-sprite-after-absolute-outside($element, $valign=top, $halign=left, $xOffset=0, $yOffset=0, $float=left)
 cssowl-after-absolute-outside("", $element[2], $element[3], $valign, $halign, $xOffset, $yOffset)
 &:after
 @extend ${$element[4]}
Examples
Quia sint quis
<div class='example-sprite-after-absolute-outside' style='display:inline-block;border-top:1px solid #59371f;padding-top: 5px;'>Quia sint quis</div>

<style>
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-after-absolute-outside:after {
 background-image: url("sprite.png");
 background-repeat: no-repeat; }
 @media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-after-absolute-outside:after {
 background-image: url("sprite@2x.png");
 background-size: 136px 111px; } }
 
 /* line 155, source/assets/css/site/_sprite.sass */
 .example-sprite-after-absolute-outside:after {
 width: 11px;
 height: 6px;
 background-position: -96px -37px; }
 
 /* line 3, (__TEMPLATE__) */
 .example-sprite-after-absolute-outside {
 position: relative; }
 /* line 10, bower_components/cssowl/lib/sass/cssowl/after.sass */
 .example-sprite-after-absolute-outside:after {
 content: "";
 width: 11px;
 height: 6px;
 position: absolute;
 top: -6px;
 left: 50%;
 margin-left: -6px; }
</style>

.example-sprite-after-absolute-outside
 +cssowl-sprite-after-absolute-outside($sprite-arrow-up, top, center)

.example-sprite-after-absolute-outside {
 @include cssowl-sprite-after-absolute-outside($sprite-arrow-up, top, center);
}

.example-sprite-after-absolute-outside {
 .cssowl-sprite-after-absolute-outside(@sprite-arrow-up, top, center);
}

.example-sprite-after-absolute-outside
 cssowl-sprite-after-absolute-outside($sprite-arrow-up, top, center)

cssowl-sprite-before

Add a sprite element with the :before pseudo selector.

Source 
=cssowl-sprite-before($element, $margin:0 0 0 0, $display:inline-block)
 &:before
 content: ""
 margin: $margin
 display: $display
 @extend %#{nth($element, 5)}


@mixin cssowl-sprite-before($element, $margin:0 0 0 0, $display:inline-block) {
 &:before {
 content: "";
 margin: $margin;
 display: $display;
 @extend %#{nth($element, 5)};
 }
}


.cssowl-sprite-before(@element, @margin:0 0 0 0, @display:inline-block) {
 &:before {
 content: "";
 margin: @margin;
 display: @display;
 .less-sprite-element(extract(@element, 5));
 }
}

cssowl-sprite-before($element, $margin=0 0 0 0, $display=inline-block)
 &:before
 content ""
 margin $margin
 display $display
 @extend ${$element[4]}
Examples
Quia sint quis nam et quia ducimus consequatur cumque.
<div class='example-sprite-before'>Quia sint quis nam et quia ducimus consequatur cumque.</div>

<style>
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-before:before {
 background-image: url("sprite.png");
 background-repeat: no-repeat; }
 @media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-before:before {
 background-image: url("sprite@2x.png");
 background-size: 136px 111px; } }
 
 /* line 275, source/assets/css/site/_sprite.sass */
 .example-sprite-before:before {
 width: 16px;
 height: 16px;
 background-position: -93px 0; }
 
 /* line 62, bower_components/cssowl/lib/sass/cssowl/sprite.sass */
 .example-sprite-before:before {
 content: "";
 margin: 0 10px -2px 0;
 display: inline-block; }
</style>

.example-sprite-before
 +cssowl-sprite-before($sprite-owl-up, 0 10px -2px 0)

.example-sprite-before {
 @include cssowl-sprite-before($sprite-owl-up, 0 10px -2px 0);
}

.example-sprite-before {
 .cssowl-sprite-before(@sprite-owl-up, 0 10px -2px 0);
}

.example-sprite-before
 cssowl-sprite-before($sprite-owl-up, 0 10px -2px 0)

cssowl-sprite-before-float

Add a sprite element with the :before pseudo selector and place it with the float attribute.

Source 
=cssowl-sprite-before-float($element, $margin:0 0 0 0, $float:left)
 +cssowl-before-float("", $margin, $float)
 &:before
 @extend %#{nth($element, 5)}


@mixin cssowl-sprite-before-float($element, $margin:0 0 0 0, $float:left) {
 @include cssowl-before-float("", $margin, $float);
 &:before {
 @extend %#{nth($element, 5)};
 }
}


.cssowl-sprite-before-float(@element, @margin:0 0 0 0, @float:left) {
 .cssowl-before-float("", @margin, @float);
 &:before {
 .less-sprite-element(extract(@element, 5));
 }
}

cssowl-sprite-before-float($element, $margin=0 0 0 0, $float=left)
 cssowl-before-float("", $margin, $float)
 &:before
 @extend ${$element[4]}
Examples
Quia sint quis nam et quia ducimus consequatur cumque.
<div class='example-sprite-before-float'>Quia sint quis nam et quia ducimus consequatur cumque.</div>

<style>
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-before-float:before {
 background-image: url("sprite.png");
 background-repeat: no-repeat; }
 @media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-before-float:before {
 background-image: url("sprite@2x.png");
 background-size: 136px 111px; } }
 
 /* line 275, source/assets/css/site/_sprite.sass */
 .example-sprite-before-float:before {
 width: 16px;
 height: 16px;
 background-position: -93px 0; }
 
 /* line 23, bower_components/cssowl/lib/sass/cssowl/before.sass */
 .example-sprite-before-float:before {
 float: left;
 margin: 0 5px 0 0;
 content: ""; }
</style>

.example-sprite-before-float
 +cssowl-sprite-before-float($sprite-owl-up, 0 5px 0 0)

.example-sprite-before-float {
 @include cssowl-sprite-before-float($sprite-owl-up, 0 5px 0 0);
}

.example-sprite-before-float {
 .cssowl-sprite-before-float(@sprite-owl-up, 0 5px 0 0);
}

.example-sprite-before-float
 cssowl-sprite-before-float($sprite-owl-up, 0 5px 0 0)

cssowl-sprite-before-absolute

Add a sprite element with the :before pseudo selector and place it absolutely.

Source 
=cssowl-sprite-before-absolute($element, $coordinates:0 false false 0)
 +cssowl-before-absolute("", $coordinates)
 &:before
 @extend %#{nth($element, 5)}


@mixin cssowl-sprite-before-absolute($element, $coordinates:0 false false 0) {
 @include cssowl-before-absolute("", $coordinates);
 &:before {
 @extend %#{nth($element, 5)};
 }
}


.cssowl-sprite-before-absolute(@element, @coordinates:0 false false 0) {
 .cssowl-before-absolute("", @coordinates);
 &:before {
 .less-sprite-element(extract(@element, 5));
 }
}

cssowl-sprite-before-absolute($element, $coordinates=0 false false 0)
 cssowl-before-absolute("", $coordinates)
 &:before
 @extend ${$element[4]}
Examples
Quia sint quis nam et quia ducimus consequatur cumque.
<div class='example-sprite-before-absolute' style='margin-left:20px;'>Quia sint quis nam et quia ducimus consequatur cumque.</div>

<style>
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-before-absolute:before {
 background-image: url("sprite.png");
 background-repeat: no-repeat; }
 @media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-before-absolute:before {
 background-image: url("sprite@2x.png");
 background-size: 136px 111px; } }
 
 /* line 275, source/assets/css/site/_sprite.sass */
 .example-sprite-before-absolute:before {
 width: 16px;
 height: 16px;
 background-position: -93px 0; }
 
 /* line 3, (__TEMPLATE__) */
 .example-sprite-before-absolute {
 position: relative; }
 /* line 17, bower_components/cssowl/lib/sass/cssowl/before.sass */
 .example-sprite-before-absolute:before {
 content: "";
 top: 2px;
 left: -20px;
 position: absolute; }
</style>

.example-sprite-before-absolute
 +cssowl-sprite-before-absolute($sprite-owl-up, 2px false false -20px)

.example-sprite-before-absolute {
 @include cssowl-sprite-before-absolute($sprite-owl-up, 2px false false -20px);
}

.example-sprite-before-absolute {
 .cssowl-sprite-before-absolute(@sprite-owl-up, 2px false false -20px);
}

.example-sprite-before-absolute
 cssowl-sprite-before-absolute($sprite-owl-up, 2px false false -20px)

cssowl-sprite-before-absolute-inside

Add a sprite element with the :before pseudo selector and place it absolutely inside the bounding box.

Source 
=cssowl-sprite-before-absolute-inside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
 +cssowl-before-absolute-inside("", nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset)
 &:before
 @extend %#{nth($element, 5)}


@mixin cssowl-sprite-before-absolute-inside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
 @include cssowl-before-absolute-inside("", nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset);
 &:before {
 @extend %#{nth($element, 5)};
 }
}


.cssowl-sprite-before-absolute-inside(@element, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
 .cssowl-before-absolute-inside("", extract(@element, 3), extract(@element, 4), @valign, @halign, @xOffset, @yOffset);
 &:before {
 .less-sprite-element(extract(@element, 5));
 }
}

cssowl-sprite-before-absolute-inside($element, $valign=top, $halign=left, $xOffset=0, $yOffset=0)
 cssowl-before-absolute-inside("", $element[2], $element[3], $valign, $halign, $xOffset, $yOffset)
 &:before
 @extend ${$element[4]}
Examples
Quia sint quis
<div class='example-sprite-before-absolute-inside' style='display:inline-block;border-top:1px solid #59371f;padding-top: 5px;'>Quia sint quis</div>

<style>
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-before-absolute-inside:before {
 background-image: url("sprite.png");
 background-repeat: no-repeat; }
 @media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-before-absolute-inside:before {
 background-image: url("sprite@2x.png");
 background-size: 136px 111px; } }
 
 /* line 215, source/assets/css/site/_sprite.sass */
 .example-sprite-before-absolute-inside:before {
 width: 11px;
 height: 6px;
 background-position: -96px -50px; }
 
 /* line 3, (__TEMPLATE__) */
 .example-sprite-before-absolute-inside {
 position: relative; }
 /* line 4, bower_components/cssowl/lib/sass/cssowl/before.sass */
 .example-sprite-before-absolute-inside:before {
 content: "";
 width: 11px;
 height: 6px;
 position: absolute;
 top: 0;
 left: 50%;
 margin-left: -6px; }
</style>

.example-sprite-before-absolute-inside
 +cssowl-sprite-before-absolute-inside($sprite-arrow-down, top, center)

.example-sprite-before-absolute-inside {
 @include cssowl-sprite-before-absolute-inside($sprite-arrow-down, top, center);
}

.example-sprite-before-absolute-inside {
 .cssowl-sprite-before-absolute-inside(@sprite-arrow-down, top, center);
}

.example-sprite-before-absolute-inside
 cssowl-sprite-before-absolute-inside($sprite-arrow-down, top, center)

cssowl-sprite-before-absolute-outside

Add a sprite element with the :before pseudo selector and place it absolutely outside the bounding box.

Source 
=cssowl-sprite-before-absolute-outside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0, $float:left)
 +cssowl-before-absolute-outside("", nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset)
 &:before
 @extend %#{nth($element, 5)}


@mixin cssowl-sprite-before-absolute-outside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0, $float:left) {
 @include cssowl-before-absolute-outside("", nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset);
 &:before {
 @extend %#{nth($element, 5)};
 }
}


.cssowl-sprite-before-absolute-outside(@element, @valign:top, @halign:left, @xOffset:0, @yOffset:0, @float:left) {
 .cssowl-before-absolute-outside("", extract(@element, 3), extract(@element, 4), @valign, @halign, @xOffset, @yOffset);
 &:before {
 .less-sprite-element(extract(@element, 5));
 }
}

cssowl-sprite-before-absolute-outside($element, $valign=top, $halign=left, $xOffset=0, $yOffset=0, $float=left)
 cssowl-before-absolute-outside("", $element[2], $element[3], $valign, $halign, $xOffset, $yOffset)
 &:before
 @extend ${$element[4]}
Examples
Quia sint quis
<div class='example-sprite-before-absolute-outside' style='display:inline-block;border-top:1px solid #59371f;padding-top: 5px;'>Quia sint quis</div>

<style>
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-before-absolute-outside:before {
 background-image: url("sprite.png");
 background-repeat: no-repeat; }
 @media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
 /* line 35, source/assets/css/site/_sprite.sass */
 .example-sprite-before-absolute-outside:before {
 background-image: url("sprite@2x.png");
 background-size: 136px 111px; } }
 
 /* line 155, source/assets/css/site/_sprite.sass */
 .example-sprite-before-absolute-outside:before {
 width: 11px;
 height: 6px;
 background-position: -96px -37px; }
 
 /* line 3, (__TEMPLATE__) */
 .example-sprite-before-absolute-outside {
 position: relative; }
 /* line 10, bower_components/cssowl/lib/sass/cssowl/before.sass */
 .example-sprite-before-absolute-outside:before {
 content: "";
 width: 11px;
 height: 6px;
 position: absolute;
 top: -6px;
 left: 50%;
 margin-left: -6px; }
</style>

.example-sprite-before-absolute-outside
 +cssowl-sprite-before-absolute-outside($sprite-arrow-up, top, center)

.example-sprite-before-absolute-outside {
 @include cssowl-sprite-before-absolute-outside($sprite-arrow-up, top, center);
}

.example-sprite-before-absolute-outside {
 .cssowl-sprite-before-absolute-outside(@sprite-arrow-up, top, center);
}

.example-sprite-before-absolute-outside
 cssowl-sprite-before-absolute-outside($sprite-arrow-up, top, center)

Text

cssowl-text-hide

Extendable placeholder and mixin to hide an element's content.

Source 
// mixin
=cssowl-text-hide()
 overflow: hidden
 text-indent: 100%
 white-space: nowrap
 display: inline-block
// extendable placeholder
%cssowl-text-hide
 +cssowl-text-hide()

// mixin
@mixin cssowl-text-hide() {
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 display: inline-block;
}
// extendable placeholder
%cssowl-text-hide {
 @include cssowl-text-hide();
}

// mixin
.cssowl-text-hide() {
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 display: inline-block;
}
// disabled as less doesn't provide placeholders yet
//.cssowl-text-hide {
// .cssowl-text-hide();
//}

// mixin
cssowl-text-hide()
 overflow hidden
 text-indent 100%
 white-space nowrap
 display inline-block
// extendable placeholder
$cssowl-text-hide
 cssowl-text-hide()
Examples
Lorem ipsum dolor sit atem 
Lorem <span class="example-text-hide">ipsum</span> dolor sit atem

<style>
 /* line 9, bower_components/cssowl/lib/sass/cssowl/text.sass */
 .example-text-hide {
 overflow: hidden;
 text-indent: 1000%;
 white-space: nowrap;
 display: inline-block; }
</style>

.example-text-hide
 @extend %cssowl-text-hide

.example-text-hide {
 @extend %cssowl-text-hide;
}

.example-text-hide {
 &:extend(.cssowl-text-hide);
}

.example-text-hide
 @extend $cssowl-text-hide