stylus_基础语法（书写习惯/变量/用CSS方式写代码）

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;
}