Skip to content

Instantly share code, notes, and snippets.



Created Jul 22, 2008
What would you like to do?
Sass + 3 column A List Apart Layout
/* Change lc_width and rc_width to control column width, and voila */
!lc_width= 140px
!rc_width= 180px
!lc_p= 10px
!lc_pad= !lc_p*2
!rc_p= 10px
!rc_pad= !rc_p*2
!lc_full= !lc_width + !lc_pad
!rc_full= !rc_width + !rc_pad
!cc_p= 20px
!cc_pad= !cc_p*2
:margin 0
:padding-left= !lc_full
:padding-right= !rc_full + !cc_pad
:min-width 500px
:font-family Georgia
:margin-left= -1*!lc_full
:margin-right= -1*(!rc_full + !cc_pad)
:text-align right
:padding 0.3em 0
:background #CCC
:position relative
:float left
:padding-top 1em
:padding= 0 !cc_p
:width 100%
:background-color #FFF
:width= !lc_width
:padding= 0 !lc_p
:right= !lc_full + !cc_pad
:margin-left -100%
:background-color #FFF
:border 1px dashed #CCC
:width= !rc_width
:padding= 0 !rc_p
:margin-right -100%
:background-color #FFF
:border 1px dashed #CCC
:margin-left= -!lc_full
:margin-right= -(!rc_full + !cc_pad)
:text-align center
:padding 0.3em 0
:background #CCC
:clear both
* html #left
:left= !rc_full
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.