stylus跟less sass做的是同样的事情，之间有很多共同的地方，比如变量、计算的想法
归纳下stylus基础知识
书写习惯
没有封号、花括号、逗号也是可以执行的
- 封号可选
- 花括号可选
- 逗号可选
- 括号可选
styl
*
margin 0
padding 0
编译后的css
* {
margin: 0;
padding: 0;
}
变量
可以将常用的参数定义为变量，在需要的地方直接引用变量即可；
比如color、font-size、width、height等等；
可以将这些东西抽出来形成一个文件，也就是主题；
- 书写上： 可以写成font-size，也可以写成@font-size;
styl
font-size = 16px //单一变量
font = 12px/16px '微软雅黑' //变量表达式
$width = 16px //可以带标示符
a
font font //直接引用单一变量
width $width //直接引用变量表达式
margin-left (@width/2) //可以用@来访问该属性当前对应的值
编译后的css
a {
font: 0.75px '微软雅黑';
width: 16px;
margin-left: 8px;
}
用类似CSS的方式开发
Stylus可以用结构来表现css层级关系
styl
body
color red
ul
line-height 20px
height 20px
font-size 16px
li
display inline-block
padding 10px
border 1px solid #ccc
text-align center
a
color red
font-size 12px
编译后的css
body {
color: #f00;
}
body ul {
line-height: 20px;
height: 20px;
font-size: 16px;
}
body ul li {
display: inline-block;
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
body ul li a {
color: #f00;
font-size: 12px;
}
