Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
Less 英文网:https://lesscss.org
Less 中文网:http://lesscss.cn/#
下面通过一个简单示例演示一下 Less 的用法。如下:
// 定义变量,后续详细介绍 // 字体颜色 @baseFontColor: #333333; // 背景颜色 @baseBgColor: #F0F0F0; // 设置 box 样式 .box { // 引用变量 @baseFontColor,后续介绍 color: @baseFontColor; background: @baseBgColor; div { font-size: 16px; color: @baseFontColor; } }
接着通过命令编译 less,但在编译前需要安装 node.js 和 less 插件,运行如下命令安装 less 插件:
npm install -g less
成功安装 less 插件后,使用 lessc 命令编译 Less,命令如下:
lessc demo1.less
编译后,输出如下 CSS:
.box { color: #333333; background: #F0F0F0; } .box div { font-size: 16px; color: #333333; }