stylus的使用-变量和函数

2021-05-13 16:34:34 阅读：246 来源： 互联网

标签：变量 stylus styl base red border css 函数

stylus个人通俗一点认为就是css的框架，可以简化css代码的书写，和支持一些模块化的使用方式！

base.stylu文件中：
RemoveDefault()
    appearance: none
    border:none
    outline: none
$red = rgb(255,69,0) //定义$red  在引入base.styl的其他styl 中直接使用$red 即可！ 
//base.styl这个 styl文件中定义了一个函数RemoveDefault() 里面封装了一些常用样式。
当在其他styl文件或者 Vue的lang=“stylus” 的script中，使用 @import 'base.styl',
然后直接 使用 RemoveDefaul()就相当于书写上面三个样式！！！

ex:
1.styl 中：
@import 'base.styl'
.main
     RemoveDefault() //直接使用函数
     color:#ccc
     font-size:14px

带参数的函数的使用
test(c,border = false)
    if( border == true )
        border 1px solid c
    else 
        background-color:#FFA500

usetest() //其他styl 通过函数中转调用还是 直接传参调用test()都可！
    test(red,true)

css框架极大的提高了css代码的复用性，可以把一类好看的组件样式抽离为一个文件，后续用到直接引入文件调用函数即可！！！

标签：变量,stylus,styl,base,red,border,css,函数
来源： https://www.cnblogs.com/Hijacku/p/14765074.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

stylus的使用-变量和函数