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">&#xf07d;</i></a> <a href="?" class="yo-btn yo-btn-m"><i class="yo-ico">&#xf07e;</i></a> <a href="?" class="yo-btn yo-btn-m"><i class="yo-ico">&#xf07f;</i></a> </div>

Button Bar

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

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

全局扩展方式:

@include yo-btnbar( $name: test, $radius: .1rem );

使用方法:

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

局部扩展方式:

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

使用方法:

<div class="xxx"> <div class="yo-btnbar yo-btnbar-test"> ... </div> </div>
@include yo-btnbar(
    $name:default, //{String} 为新的扩展定义一个名称
    $radius:default //{Length} 圆角半径长度
)