更新

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

它非常接近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而不是使用按钮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;
        }
    }
}

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

更新

1 个答案: