cssowl-absolute

Extendable placeholder and mixin to position an element absolutely.

// 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
<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>
  .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.

// 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);
<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>
  .example-absolute-inside > .top-center {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -5px;
  }
  .example-absolute-inside > .middle-right {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    right: 0;
  }
  .example-absolute-inside > .bottom-center {
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -5px;
  }
  .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.

// 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);
<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>
  .example-absolute-outside > .top-center {
    width: 10px;
    height: 10px;
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -5px;
  }
  .example-absolute-outside > .middle-right {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    right: -10px;
  }
  .example-absolute-outside > .bottom-center {
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -5px;
  }
  .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)

cssowl-after-float

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

// 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
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>
  .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.

// 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)
<div class='example-after-absolute' style='width:50px;height:50px;border:1px solid #59371f;'></div>
<style>
  .example-after-absolute {
    position: relative;
  }
  .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.

=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)
<div class='example-after-absolute-inside' style='width:50px;height:50px;border:1px solid #59371f;'></div>
<style>
  .example-after-absolute-inside {
    position: relative;
  }
  .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.

=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)
<div class='example-after-absolute-outside' style='width:50px;height:50px;border:1px solid #59371f;'></div>
<style>
  .example-after-absolute-outside {
    position: relative;
  }
  .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)

cssowl-before-float

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

// 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
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>
  .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.

// 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)
<div class='example-before-absolute' style='width:50px;height:50px;border:1px solid #59371f;'></div>
<style>
  .example-before-absolute {
    position: relative;
  }
  .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.

=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)
<div class='example-before-absolute-inside' style='width:50px;height:50px;border:1px solid #59371f;'></div>
<style>
  .example-before-absolute-inside {
    position: relative;
  }
  .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.

=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)
<div class='example-before-absolute-outside' style='width:50px;height:50px;border:1px solid #59371f;'></div>
<style>
  .example-before-absolute-outside {
    position: relative;
  }
  .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)

cssowl-coords

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

=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
<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>
  .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.

=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
<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>
  .example-coords-inside {
    width: 10px;
    height: 10px;
    position: absolute;
    background: #59371f;
  }
  .example-coords-inside.top-center {
    top: 0;
    left: 50%;
    margin-left: -5px;
  }
  .example-coords-inside.middle-right {
    top: 50%;
    margin-top: -5px;
    right: 0;
  }
  .example-coords-inside.bottom-center {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
  }
  .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.

=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)
<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>
  .example-coords-outside {
    width: 10px;
    height: 10px;
    position: absolute;
    background: #59371f;
  }
  .example-coords-outside.top-center {
    top: -10px;
    left: 50%;
    margin-left: -5px;
  }
  .example-coords-outside.middle-right {
    top: 50%;
    margin-top: -5px;
    right: -10px;
  }
  .example-coords-outside.bottom-center {
    bottom: -10px;
    left: 50%;
    margin-left: -5px;
  }
  .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)

cssowl-relative

Extendable placeholder and mixin to position an element relatively.

// 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
<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>
  .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)

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:

// 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.

@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]}
Lorem ipsum dolor sit atem
Lorem <span class="example-sprite-display"></span> ipsum dolor sit atem
<style>
  .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) {
    .example-sprite-display {
      background-image: url("sprite@2x.png");
      background-size: 136px 111px;
    }
  }
  
  .example-sprite-display {
    width: 16px;
    height: 16px;
    background-position: -93px 0;
  }
  
  .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.

@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]}
Lorem ipsum dolor sit atem
Lorem <span class="example-replace">ipsum</span> dolor sit atem
<style>
  .example-replace {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    display: inline-block;
  }
  
  .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) {
    .example-replace {
      background-image: url("sprite@2x.png");
      background-size: 136px 111px;
    }
  }
  
  .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;.

=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]}
<div class='wrapper' style='position:relative;width:50px;height:50px;border:1px solid #59371f;'>
  <div class='example-sprite-absolute'></div>
</div>
<style>
  .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) {
    .example-sprite-absolute {
      background-image: url("sprite@2x.png");
      background-size: 136px 111px;
    }
  }
  
  .example-sprite-absolute {
    width: 16px;
    height: 16px;
    background-position: -93px 0;
  }
  
  .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.

=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]}
<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>
  .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) {
    .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;
    }
  }
  
  .example-sprite-absolute-inside > .bottom-center {
    width: 11px;
    height: 6px;
    background-position: -96px -37px;
  }
  
  .example-sprite-absolute-inside > .middle-left {
    width: 6px;
    height: 11px;
    background-position: -98px -76px;
  }
  
  .example-sprite-absolute-inside > .top-center {
    width: 11px;
    height: 6px;
    background-position: -96px -50px;
  }
  
  .example-sprite-absolute-inside > .middle-right {
    width: 6px;
    height: 11px;
    background-position: -98px -61px;
  }
  
  .example-sprite-absolute-inside > .top-center {
    width: 11px;
    height: 6px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -6px;
  }
  .example-sprite-absolute-inside > .middle-right {
    width: 6px;
    height: 11px;
    position: absolute;
    top: 50%;
    margin-top: -6px;
    right: 0;
  }
  .example-sprite-absolute-inside > .bottom-center {
    width: 11px;
    height: 6px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -6px;
  }
  .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.

=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]}
<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>
  .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) {
    .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;
    }
  }
  
  .example-sprite-absolute-outside > .top-center {
    width: 11px;
    height: 6px;
    background-position: -96px -37px;
  }
  
  .example-sprite-absolute-outside > .middle-right {
    width: 6px;
    height: 11px;
    background-position: -98px -76px;
  }
  
  .example-sprite-absolute-outside > .bottom-center {
    width: 11px;
    height: 6px;
    background-position: -96px -50px;
  }
  
  .example-sprite-absolute-outside > .middle-left {
    width: 6px;
    height: 11px;
    background-position: -98px -61px;
  }
  
  .example-sprite-absolute-outside > .top-center {
    width: 11px;
    height: 6px;
    position: absolute;
    top: -6px;
    left: 50%;
    margin-left: -6px;
  }
  .example-sprite-absolute-outside > .middle-right {
    width: 6px;
    height: 11px;
    position: absolute;
    top: 50%;
    margin-top: -6px;
    right: -6px;
  }
  .example-sprite-absolute-outside > .bottom-center {
    width: 11px;
    height: 6px;
    position: absolute;
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
  }
  .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.

=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]}
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>
  .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) {
    .example-sprite-after:after {
      background-image: url("sprite@2x.png");
      background-size: 136px 111px;
    }
  }
  
  .example-sprite-after:after {
    width: 16px;
    height: 16px;
    background-position: -93px 0;
  }
  
  .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.

=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]}
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>
  .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) {
    .example-sprite-after-float:after {
      background-image: url("sprite@2x.png");
      background-size: 136px 111px;
    }
  }
  
  .example-sprite-after-float:after {
    width: 16px;
    height: 16px;
    background-position: -93px 0;
  }
  
  .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.

=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]}
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>
  .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) {
    .example-sprite-after-absolute:after {
      background-image: url("sprite@2x.png");
      background-size: 136px 111px;
    }
  }
  
  .example-sprite-after-absolute:after {
    width: 16px;
    height: 16px;
    background-position: -93px 0;
  }
  
  .example-sprite-after-absolute {
    position: relative;
  }
  .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.

=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]}
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>
  .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) {
    .example-sprite-after-absolute-inside:after {
      background-image: url("sprite@2x.png");
      background-size: 136px 111px;
    }
  }
  
  .example-sprite-after-absolute-inside:after {
    width: 11px;
    height: 6px;
    background-position: -96px -50px;
  }
  
  .example-sprite-after-absolute-inside {
    position: relative;
  }
  .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.

=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]}
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>
  .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) {
    .example-sprite-after-absolute-outside:after {
      background-image: url("sprite@2x.png");
      background-size: 136px 111px;
    }
  }
  
  .example-sprite-after-absolute-outside:after {
    width: 11px;
    height: 6px;
    background-position: -96px -37px;
  }
  
  .example-sprite-after-absolute-outside {
    position: relative;
  }
  .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.

=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]}
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>
  .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) {
    .example-sprite-before:before {
      background-image: url("sprite@2x.png");
      background-size: 136px 111px;
    }
  }
  
  .example-sprite-before:before {
    width: 16px;
    height: 16px;
    background-position: -93px 0;
  }
  
  .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.

=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]}
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>
  .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) {
    .example-sprite-before-float:before {
      background-image: url("sprite@2x.png");
      background-size: 136px 111px;
    }
  }
  
  .example-sprite-before-float:before {
    width: 16px;
    height: 16px;
    background-position: -93px 0;
  }
  
  .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.

=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]}
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>
  .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) {
    .example-sprite-before-absolute:before {
      background-image: url("sprite@2x.png");
      background-size: 136px 111px;
    }
  }
  
  .example-sprite-before-absolute:before {
    width: 16px;
    height: 16px;
    background-position: -93px 0;
  }
  
  .example-sprite-before-absolute {
    position: relative;
  }
  .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.

=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]}
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>
  .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) {
    .example-sprite-before-absolute-inside:before {
      background-image: url("sprite@2x.png");
      background-size: 136px 111px;
    }
  }
  
  .example-sprite-before-absolute-inside:before {
    width: 11px;
    height: 6px;
    background-position: -96px -50px;
  }
  
  .example-sprite-before-absolute-inside {
    position: relative;
  }
  .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.

=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]}
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>
  .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) {
    .example-sprite-before-absolute-outside:before {
      background-image: url("sprite@2x.png");
      background-size: 136px 111px;
    }
  }
  
  .example-sprite-before-absolute-outside:before {
    width: 11px;
    height: 6px;
    background-position: -96px -37px;
  }
  
  .example-sprite-before-absolute-outside {
    position: relative;
  }
  .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)

cssowl-text-hide

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

// 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()
Lorem ipsum dolor sit atem
Lorem <span class="example-text-hide">ipsum</span> dolor sit atem
<style>
  .example-text-hide {
    overflow: hidden;
    text-indent: 100%;
    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