Zurb Foundation 5 中的自定义按钮组，SASS Mixins 无法正确显示

Question

我想使用他们的自定义 SCSS 混合在 Foundation 的按钮栏中创建一个圆形按钮组。

所以我的标记看起来像这样：

    <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>

我的 scss 看起来像这样：（假设我可以正确加载基础元素）

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

它非常接近example，但按钮之间没有任何边框。如果我为每个添加 .button ，它就可以工作。我宁愿在每个元素上只设置一个类，让一切保持美观和语义。

各个按钮都将带有图标，因此需要将它们与其他按钮区分开来。

谢谢。

更新

深入研究编译的内容，我的自定义按钮组类 .contextualButtons 并没有用我的自定义按钮类替换默认的 .button。

.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;
}

看起来我最好扩展 .button 而不是使用按钮混合。这不是文档似乎表明的内容，但我现在明白这不是 mixins 的编写方式。将按钮组容器和按钮组按钮类组合成一个混合器可能会更好，其中定义了两个类名（或字符串）。

Answer 1

看起来不错。

.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;
        }
    }
}