compass sass - Horizontal list menu: Calculated equal % width -

compass sass - Horizontal list menu: Calculated equal % width -

i new sass/compass , experimenting mixins. illustration below shows code simple ribbon style horizontal menu inheriting @include horizontal-list mixin, bundled compass.

this static menu has 4 list items , hence have set li width 25%

my question. compass have method calculating equal percentage width value list items in dynamic menu undefined number of items?

something like, total li/100 = x% li width

@mixin ribbon-menu { ul { padding: 0; } li { width: 25%; border-right: 1px solid $white; text-align: center; } li.last { border-left: 0; } li.leaf { padding: 0; } { display: block; text-decoration: none; padding: 10px; color: $white; } a:link, a:visited { background: $black; } a:active, a:hover, a:focus { background: $red; } }

hopefully help you.

http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/

@for $i 1 through 4 { li:first-child:nth-last-child(#{$i}), li:first-child:nth-last-child(#{$i}) ~ li { width: 100% / $i } }

compass-sass