express 學習筆記（四）css
阿新 • • 發佈：2019-01-24
1. Stylus
2. Less
3. SASS
package:
"stylus":"~0.54.5",
"less-middleware":"~2.2.0",
"node-sass-middleware":"0.9.8",程式碼：
javascript
var express = require('express'); // var stylus = require('stylus'); // var less = require("less-middleware"); var sass = require('node-sass-middleware'); var app = express(); app.use(express.static(__dirname + '/static')); // app.use(stylus.middleware(__dirname + '/static')); // // app.use(less(__dirname + '/static')); app.use(sass(__dirname + '/static')); app.listen(1234, 'localhost');
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <a href="hello.html">Hello</a> <span>World</span> <div>this is maizi</div> </body> </html>
sytle.styl
body
color white
background-color blackstyle.less
@nice-blue: #5b83AD;
@light-blue: @nice-blue+#666;
body {
color: @light-blue;
div{
color: @nice-blue;
}
}style.scss
body {
div {
color: red
}
}