CSS-stylus

发表于 分类于

安装

1
npm install stylus -g

编译命令

1
stylus index.styl -o index.css   //index是创建的文件名  -o 的意思是-out 输出css文件

你会发现stylus自动帮我们在本目录下编译并生成好了index.css文件

每修改一次stylus文件就要再输入一次stylus命令进行重新编译，这样对于我们开发者来说极大的不便。
所以stylus提供了解决的方法，就是在原有基础上加上-w

1
stylus -w index.styl -o index.css   //在原有的基础上加了-w  w的意思是watch，也就是监听

这样就可以实时监听修改，并实时编译。

这是写好的 stylus 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
*
  margin 0
  padding 0
.tab
  display flex
  width 100%
  height 40px
  line-height 40px
  .tab-item
    flex 1
    text-align center
    & > a
      display block
      font-size 14px
      color rgb(77, 85, 93)
      text-decoration none

这是编译生成后的 css 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
* {
  margin: 0;
  padding: 0;
}
.tab {
  display: flex;
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.tab .tab-item {
  flex: 1;
  text-align: center;
}
.tab .tab-item > a {
  display: block;
  font-size: 14px;
  color: #4d555d;
  text-decoration: none;
}

注释

https://www.zhangxinxu.com/jq/stylus/comments.php

在 stylus 中的单行注释不会写入编译后的 css 中，多行注释在compress选项未启用的时候才会被输出