前言:stylus和sass、less同为css预处理器。css预处理器是:你用“我的”语法来写,更简单,更强大,最后我帮你编译成css文件。说实话,之前我没用过css预处理器,stylus是接触的第一个,确实比写css要简洁,而且可以用变量,函数…(其他方面等我用到再来更新)
如何在项目中应用?
1、安装
$ npm install stylus -g
2、设置 lang='stylus'
<style scoped lang="stylus">
</style>
3、OK,可以用stylus来设置样式了。
4、stylus的一些简单用法(语法和css还是很接近的)
(1)括号可省、冒号可省、分号可省
body
font-size 12px
//--相当于
body{
font-size:12px;
}
(2)换行缩进代表层级(.box span)
.box
span
color #000
font-size 16px
//相当于
.box span{
color:#000;
font-size:16px;
}
(3)同时定义属性可以用逗号或者换行(.box,.main)
.box,.main
border 1px solid #ccc
//或者
.box
.main
border 1px solid #ccc
//相当于
.box,
.main{
border:1px solid #ccc;
}
(4)父级引用(.box:hover 或者 .box::before)
.box
background #f1f1f1
span
font-size 12px
&:hover
color red
//相当于
.box {
background: #f1f1f1;
}
.box span {
font-size: 12px;
}
.box:hover {
color: #f00;
}
5、稍微高级一点的
(1)使用变量
bodyColor = red
body
font-size bodyColor
相当于
body {
font-size: #f00;
}
(2)使用函数
add(a, b)
a + b
body
padding add(10px, 5)
//相当于
body {
padding: 15px;
}
小技巧:当不确定自己写的stylus语句是否如自己所想,可以验证一下,在中文文档里有一个在线工具。
中文文档:https://stylus.bootcss.com/