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(light,#ddd,#fff,map-get($base, color));

使用方法:

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

局部扩展方式:

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

使用方法:

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

Normal Button

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

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

全局扩展方式:

@include yo-btn(normal,#ddd,#eee,#212121);

使用方法:

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

局部扩展方式:

.xxx{ @include yo-btn(normal,#ddd,#eee,#212121); }

使用方法:

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

Info Button

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

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

全局扩展方式:

@include yo-btn(info,#0456e2,#4a87ee);

使用方法:

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

局部扩展方式:

.xxx{ @include yo-btn(info,#0456e2,#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, //{default | String} yo-btn名称
    $bordercolor:default, //{default | Color} yo-btn边框色
    $bgcolor:default, //{default | Color} yo-btn背景色
    $color:default, //{default | Color} yo-btn文本色
    $padding:default, //{default | Length} yo-btn内补白
    $radius:default, //{default | Length} yo-btn圆角
    $font-size:default, //{default | Length} yo-btn字号
    $width:default, //{default | Length} yo-btn宽度
    $height:default //{default | Length} yo-btn高度
)