在普通的h5页面中使用stylus预处理框架

为什么要使用css预处理框架stylus呢？举个例子~

如果直接写下面标签的样式，就要写一堆css选择器，而使用stylus看上去不仅更加简洁，也更容易维护

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="./css/index.css">
    </head>
    <body>
        <div class="box">
            <div class="content">
                <h1 class="title">title</h1>
                <span class="text">测试stylus语法</span>
            </div>
        </div>
    </body>
</html>

用法：

1、目录结构

2、stylus安装，在stylus目录下安装：

npm install -g stylus

2、监听watch，要在根目录下执行命令行，不是在stylus目录下哦：

$ stylus -w  stylus/index.styl -o css/index.css
  watching D:/nodejs/node_global/node_modules/stylus/lib/functions/index.styl
  compiled css/index.css
  watching stylus/index.styl

启动成功后是实时监听的，在index.styl写完样式保存后就会同步到index.css，并刷新页面样式

==》页面效果 ==》