Custom Button Group in Zurb Foundation 5 with SASS Mixins not displaying correctly

Question

I'd like to make a rounded button group in a button bar in Foundation using their custom SCSS mixins.

So my mark up looks like this:

    <ul class="contextualButtons">
            <li><a class="buttonUp">Up a Level</a></li>
            <li><a class="buttonEdit">Edit</a></li>
            <li><a class="buttonDelete">Delete File</a></li>
            <li><a class="buttonAddProtocol">Add Protocol</a></li>
            <li><a class="buttonAddFolder">Add Folder</a></li>
            <li><a class="buttonAddFile" data-dropdown="dropFile" >Add a File</a></li>
                <ul id="dropFile" data-dropdown-content class="f-dropdown">
                    <li><a href="#"class="add_content" id="add_idcrp_file">Add File</a</li>
                    <li><a href="#" class="add_content" id="add_versioned_file">Add Modifiable File</a></li>
                </ul>
            <li><a class="buttonPermissions">Permissions</a></li>
            <li><a class="buttonSearch">Search</a></li>
        </ul>

And my scss looks like this: (assume I can load foundation elements correctly)

.contextualButtons { 
    @include button-group-container();
    .buttonUp,
    .buttonEdit,
    .buttonDelete,
    .buttonAddProtocol,
    .buttonAddFolder,
    .buttonAddFile,
    .buttonPermissions,
    .buttonSearch  { 
        @include button(); 
    }
    & > li {
        @include button-group-style($button-round, 8, left);
    }
}

It gets pretty close to the example, but I'm not getting any border between the buttons. If I add .button to each, it works. I'd rather just have one class on each element, keeping things nice and semantic an all.

The individual buttons are going to have icons, so they need to be differentiated from their peers.

Thanks.

Update

Digging deeper into what compiles, my custom button group class .contextualButtons is not replacing the default .button with my custom button classes.

.contextualButtons > * > .button {
    border-right: 1px solid;
    border-color: rgba (255, 255, 255, 0.5);    
}
.contextualButtons > li:last-child button, .contextualButtons > li:last-child .button {
      border-right: 0;
}

.contextualButtons > li:first-child {
      margin-left: 0;
}

Looks like I would be better off extending .button rather than using the button mixin. This isn't what the documentation would seem to indicate, but I understand now thats not how the mixins are written. Might be better to combine button-group container and button-group button class into a single mixin into which two class names (or strings) are defined.

Answer 1

Looks ok-ish.

.contextualButtons { 
    @extend .button-group;
    .buttonUp,
    .buttonEdit,
    .buttonDelete,
    .buttonAddProtocol,
    .buttonAddFolder,
    .buttonAddFile,
    .buttonPermissions,
    .buttonSearch  { 
        @extend .button;
        padding-left: 0.1em;
        padding-right: 0.1em; 

    }
    & > li {
        @include button-group-style($button-round, 8, left);
        margin: .2em;
       & > a {
             word-wrap: break-word;
        }
    }
}