目录:
Less 01 准备工作
Less 02 变量(Variable)
Less 03 扩展(Extend)
Less 04 混入(Mixins)
Less 05 参数混入(Parametric Mixins)
Less 06 方法混入 (Mixins as Functions)
Less 07 CssRules 直接混入(Passing Rulesets to Mixins)
Less 08 导入(Import)
Less 09 守卫(Guards)
Less 10 其他操作(完结)
创建目录解构,在后续章节的学习中方便测试
mkdir demo & cd dmeo
创建编译脚本
const express = require('express')
const ejs = require('ejs');
const path = require('path')
const app = express()
app.set('views', path.join(__dirname, 'views'))
app.engine('.html', ejs.__express) // 设置视图引擎后缀,为.html
app.set('view engine', 'html') // 设置视图引擎为html
// 设置静态目录
app.use('/static', express.static(__dirname + '/libs'))
app.get('/test', function (req, res, next) {
res.render('browser')
})
app.listen(3000, function () {
console.log('success running')
})
文件夹目录结构
- demo
- libs
+ less.js //去官网下载,后续可能有用
+ style.less //后续测试都在这里
- views // 存放页面
+ browser.html
- app.js // 这里我使用express,开一个服务
- compile.js //之后需要 运行这个就可以实现自动编译
当然还需要装一些第三方包,我这用到两个
cnpm i less -g //可用于全局编译
cnpm i less -S // 脚本编译需要引用
cnpm i express -S // 搭建node服务使用
代码地址: https://github.com/sommouns/code_every_day/tree/master/Less
网友评论