Less 的用法
1. node.js
node.js是一個前端的框架 自帶一個包管理工具npm
- node.js 的安裝
官網：http://nodejs.cn/
- 在命令行檢驗是否安裝成功
- 切換到項目目錄，初始化了一個package.json文件
- 安裝與卸載jQuery包（例子）
- 安裝
-
- 卸載
- 安裝淘寶鏡像
2. 安裝less
試一試：
test.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="style.css"/> </head> <body> <div id="box"><ul><li>你好</li><li>hello</li></ul> </div> </body> </html>style.less
#box{width:200px;height:200px;background-color:blue;ul{color:white;li{line-height:50px;}} }- 在命令行中輸入lessc xxx.less xxx.css，如下：
- 用瀏覽器打開test.html 看一下效果吧
3. less 的基本用法
https://less.bootcss.com/
- ?變量
- 混合
- 嵌套
- 運算
- calc()
- 固定函數
- 注釋
- 引入其他less文件
?
總結
- 上一篇： CSS flex布局
- 下一篇： 自适应宽度元素单行文本省略用法探究