假设你想要轻柔一点的颜色,那么你可以这样扩展:
命名及颜色按照各自团队内部的FE/UI规范即可
全局扩展方式:
@include yo-btn(light,#ddd,#fff,map-get($base, color));
使用方法:
局部扩展方式:
.xxx{
@include yo-btn(light,#ddd,#fff,map-get($base, color));
}
使用方法:
假设你想要浅一点的颜色,那么你可以这样扩展:
命名及颜色按照各自团队内部的FE/UI规范即可
全局扩展方式:
@include yo-btn(normal,#ddd,#eee,#212121);
使用方法:
局部扩展方式:
.xxx{
@include yo-btn(normal,#ddd,#eee,#212121);
}
使用方法:
假设你想要素雅点的颜色,那么你可以这样扩展:
命名及颜色按照各自团队内部的FE/UI规范即可
全局扩展方式:
@include yo-btn(info,#0456e2,#4a87ee);
使用方法:
局部扩展方式:
.xxx{
@include yo-btn(info,#0456e2,#4a87ee);
}
使用方法:
-
-
-
-
-
@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高度 )