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;
}
            