0

I am very new to sass/compass and I am now experimenting with mixins. The example below shows the code for a simple ribbon style horizontal menu which is already inheriting @include horizontal-list mixin, bundled with compass.

This static menu has four list items and therefore I have set the li width as 25%

My question. Does Compass have a method for calculating an equal percentage width value for the list items in a dynamic menu with an 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;
        }
        a {
            display: block;
            text-decoration: none;
            padding: 10px;
            color: $white;
        }
        a:link, a:visited {
            background: $black;
        }
        a:active, a:hover, a:focus {
            background: $red;
        }
}
Sabyasachi Ghosh
  • 2,765
  • 22
  • 33
MrPaulDriver
  • 243
  • 1
  • 13

1 Answers1

1

Hopefully this will help you.

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

@for $i from 1 through 4 {
   li:first-child:nth-last-child(#{$i}),
   li:first-child:nth-last-child(#{$i}) ~ li {
   width: 100% / $i }
 }
Muamar
  • 161
  • 1
  • 5
  • Thanks for this. I was hoping that sass might be clever enough to know there were 4 items rather than needing this specifying. But this is still a good time saver. – MrPaulDriver Jun 24 '14 at 08:10
  • After playing around with this it seems that if the number of items specified is greater than the actual number then equal percentage values are generated. Just what I want. – MrPaulDriver Aug 27 '14 at 12:35