Insights on Ruby, Git, jQuery, Cappuccino, WordPress, Debian and OS X. Please subscribe if you find something useful!

Sass Never Forgets

Posted: July 9th, 2009 | Author: Jerod | Filed under: Ruby | Tags: , , | View Comments

Some CSS techniques require me to Google about like a chicken with its head cut off. One such technique is placing a div in the dead center of a page (vertically and horizontally). Since I’m using Sass pretty much exclusively these days, I decided to define this technique as a mixin so I don’t have to look it up anymore.

Hopefully this can be of use to others. YMMV:

The mixin definition:

=dead-center(!height,!width)
  :height= !height
  :margin-top= -(!height / 2)
  :top 50%
  :width= !width
  :margin-left= -(!width / 2)
  :left 50%
  :position absolute
  :text-align center

To use it on an element:

#centered
  +dead-center(200px,500px)

Now I’ll never forget how. Thanks Sass!

View Comments on “Sass Never Forgets”

  1. 1 1959 LSU Tigers football team » Blog Archive » The Fattest Bad Guys said at 7:42 am on July 10th, 2009:

    [...] Sass Never Forgets | blogt0sk1 [...]

  2. 2 Paul Stamatiou said at 4:57 pm on July 12th, 2009:

    Thanks for sharing Jerod… very handy! Just added your mixin to my application.sass :-)

    I've been using the typical mixin for rounded corners as well as these for when i only want rounded corners on the top or bottom of an element:

    =border-radius-top-LR(!rad = 4px)
    :-moz-border-radius-topleft = !rad
    :-moz-border-radius-topright = !rad
    :-webkit-border-top-left-radius = !rad
    :-webkit-border-top-right-radius = !rad
    :border-top-left-radius = !rad
    :border-top-right-radius = !rad

    =border-radius-bottom-LR(!rad = 4px)
    :-moz-border-radius-bottomleft = !rad
    :-moz-border-radius-bottomright = !rad
    :-webkit-border-bottom-left-radius = !rad
    :-webkit-border-bottom-right-radius = !rad
    :border-bottom-right-radius = !rad
    :border-bottom-left-radius = !rad

  3. 3 sant0sk1 said at 11:43 am on July 13th, 2009:

    Thanks Paul, I'll add these to my mixin collection!

  4. 4 Jerod Santo said at 6:43 pm on July 13th, 2009:

    Thanks Paul, I'll add these to my mixin collection!

  5. 5 Proc#curry | Chain Links #007 said at 7:46 am on July 23rd, 2009:

    [...] Sass Never Forgets – dead-center mixin A sass mixin for centering a div vertically and horizontally. I can never remember this technique either Jerod. [...]

blog comments powered by Disqus