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

Question

我想使用其自定义的SCSS mixins在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);
    }
}

它与示例非常接近，但是按钮之间没有任何边界。 如果我在每个按钮上添加.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而不是使用button mixin。 这似乎不是文档说明的内容，但是我现在知道，这不是如何编写mixin的。 最好将按钮组容器和按钮组按钮类组合到一个单独的mixin中，在其中定义两个类名（或字符串）。

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