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