在普通的h5頁面中使用stylus預處理框架
阿新 • • 發佈:2020-09-01
為什麼要使用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,並重新整理頁面樣式
==》頁面效果 ==》