less安装与使用
定义:Less 是一门 CSS 预处理语言,Less 可以运行在 Node 或浏览器端。
优点:
1、可以运行在Node或浏览器端,
2、增加了变量、Mixin、函数等特性
3、使css更加维护和扩展。
4、结构清晰,便于扩展
5、可以方便地屏蔽浏览器私有语法差异
6、可以轻松实现多重继承
7、完全兼容 CSS 代码,可以方便地应用到老项目中
安装过程
1、NodeJ运行LESS示例要下载NodeJ并安装。请打开链接 https://nodejs.org/en/ 。
2、在集成终端 npm install -g less;
3、运行lessc style.less style.css 报错,则需要以管理员身份运行上面的代码 set-executionpolicy remotesigned 即可解决
4、转换:lessc style.less style.css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div>我是Less</div> </body> </html>
@w:300px; @h:300px; @bg:blue; @c :red; @t :center; @fSize:16px; @fStyle: italic; @fWeight: bolder; @s :5px; @cs : yellow; @bs :solid; div { width: @w; height: @h; background: @bg; font-size: @fSize; font-weight: @fWeight; font-style: @fStyle; border: @s @bs @cs; color: @c; text-align: @t; line-height: @h; }
在终端输入 lessc style.less style.css 会自动生成 style.css 文件