在普通的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">titleh1>
<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,并刷新页面样式
==》页面效果 ==》