2019-01-13 Cube-UI之修改默认颜色

如题,今天我来教大家如何修改Cube-UI的默认颜色。

首先我的项目是在main.js中全局引用了Cube-UI。

用简单的按钮来做测试。

<cube-button>Button</cube-button>
image.png

第一步找到Cube-UI的模块包中的default.styl文件。

image.png
@require "../var/color.styl"
//引用了var中的color.styl文件

color.styl中存放的是定义的颜色。

image.png

你可以在color.styl中定义你想要的颜色也可以修改原有的颜色。

添加以下代码

$color-new = red

再返回到default.styl中
找到button


image.png

修改button的颜色,把背景颜色改为我们刚刚在color.styl定义的值

// button
$btn-color := $color-white
$btn-bgc := $color-new
$btn-active-bgc := $color-blue

效果

image.png

相信看过之后也了解了styl的一些语法,与sass如出一辙,Cube-UI的颜色还是很好改的。

希望可以帮助到大家。
祝,早日升职加薪!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容