Button Bar

<div class="yo-btnbar"> <a href="?" class="yo-btn yo-btn-m">取消</a> <a href="?" class="yo-btn yo-btn-m">取消</a> <a href="?" class="yo-btn yo-btn-m">取消</a> </div> <div class="yo-btnbar"> <a href="?" class="yo-btn yo-btn-m"><i class="yo-ico">&#xf042;</i></a> <a href="?" class="yo-btn yo-btn-m"><i class="yo-ico">&#xf170;</i></a> <a href="?" class="yo-btn yo-btn-m"><i class="yo-ico">&#xf037;</i></a> </div>

Button Bar

假设你想要改变圆角,那么你可以这样扩展:

命名及颜色按照各自团队内部的FE/UI规范即可

全局扩展方式:

@include yo-btnbar(test,.1rem);

使用方法:

<div class="yo-btnbar yo-btnbar-test"> ... </div>

局部扩展方式:

.xxx{ @include yo-btnbar(test,.1rem); }

使用方法:

<div class="xxx"> <div class="yo-btnbar yo-btnbar-test"> ... </div> </div>
@include yo-btnbar(
    $name:default, //{default | String} yo-btnbar名称
    $radius:default //{default | auto | Length} yo-btnbar圆角,当值为auto时,圆角大小取决于按钮的圆角大小
)