Default Button

<ul class="yo-list"> <li class="item"> <a href="?" class="yo-btn yo-btn-s">Button</a> <button class="yo-btn yo-btn-s">Button</button> <input type="button" value="Button" class="yo-btn yo-btn-s" /> </li> <li class="item"> <a href="?" class="yo-btn yo-btn-m">Button</a> <button class="yo-btn yo-btn-m">Button</button> <input type="button" value="Button" class="yo-btn yo-btn-m" /> </li> <li class="item"> <a href="?" class="yo-btn yo-btn-l">Button</a> <button class="yo-btn yo-btn-l">Button</button> <input type="button" value="Button" class="yo-btn yo-btn-l" /> </li> </ul>

Disabled Button

<ul class="yo-list"> <li class="item"> <a href="?" class="yo-btn yo-btn-disabled yo-btn-s">Button</a> <button class="yo-btn yo-btn-disabled yo-btn-s">Button</button> <input type="button" value="Button" class="yo-btn yo-btn-disabled yo-btn-s" /> </li> <li class="item"> <a href="?" class="yo-btn yo-btn-disabled yo-btn-m">Button</a> <button class="yo-btn yo-btn-disabled yo-btn-m">Button</button> <input type="button" value="Button" class="yo-btn yo-btn-disabled yo-btn-m" /> </li> <li class="item"> <a href="?" class="yo-btn yo-btn-disabled yo-btn-l">Button</a> <button class="yo-btn yo-btn-disabled yo-btn-l">Button</button> <input type="button" value="Button" class="yo-btn yo-btn-disabled yo-btn-l" /> </li> </ul>

Light Button

假设你想要轻柔一点的颜色,那么你可以这样扩展:

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

全局扩展方式:

@include yo-btn( $name: light, $bordercolor: #ddd, $bgcolor: #fff, $color: map-get($base, color) );

使用方法:

<button class="yo-btn yo-btn-light">Button</button>

局部扩展方式:

.xxx { @include yo-btn( $name: light, $bordercolor: #ddd, $bgcolor: #fff, $color: map-get($base, color) ); }

使用方法:

<div class="xxx"> <button class="yo-btn yo-btn-light">Button</button> </div>

Normal Button

假设你想要浅一点的颜色,那么你可以这样扩展:

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

全局扩展方式:

@include yo-btn( $name: normal, $bordercolor: #ddd, $bgcolor: #eee, $color: #212121 );

使用方法:

<button class="yo-btn yo-btn-normal">Button</button>

局部扩展方式:

.xxx{ @include yo-btn( $name: normal, $bordercolor: #ddd, $bgcolor: #eee, $color: #212121 ); }

使用方法:

<div class="xxx"> <button class="yo-btn yo-btn-normal">Button</button> </div>

Info Button

假设你想要素雅点的颜色,那么你可以这样扩展:

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

全局扩展方式:

@include yo-btn( $name: info, $bordercolor: #0456e2, $bgcolor: #4a87ee );

使用方法:

<button class="yo-btn yo-btn-info">Button</button>

局部扩展方式:

.xxx{ @include yo-btn( $name: info, $bordercolor: #0456e2, $bgcolor: #4a87ee ); }

使用方法:

<div class="xxx"> <button class="yo-btn yo-btn-info">Button</button> </div>

Stacked Button

<ul class="yo-list"> <li class="item"> <input type="button" value="Button" class="yo-btn yo-btn-l yo-btn-stacked" /> </li> <li class="item"> <input type="button" value="Button" class="yo-btn yo-btn-light yo-btn-l yo-btn-stacked" /> </li> <li class="item"> <input type="button" value="Button" class="yo-btn yo-btn-normal yo-btn-l yo-btn-stacked" /> </li> <li class="item"> <input type="button" value="Button" class="yo-btn yo-btn-info yo-btn-l yo-btn-stacked" /> </li> <li class="item"> <input type="button" value="Button" class="yo-btn yo-btn-disabled yo-btn-l yo-btn-stacked" /> </li> </ul>
@include yo-btn(
    $name:default, //{String} 扩展的名称
    $border-width:default, //{Length} 边框厚度
    $bordercolor:default, //{Color} 边框色
    $bgcolor:default, //{Color} 背景色
    $color:default, //{Color} 文本色
    $active-bordercolor:default, //{Color} 激活时边框色
    $active-bgcolor:default, //{Color} 激活时背景色
    $active-color:default, //{Color} 激活时文本色
    $padding:default, //{Length} 内补白
    $radius:default, //{Length} 圆角半径
    $font-size:default, //{Length} 字号
    $width:default, //{Length} 宽度
    $height:default //{Length} 高度
)