Less 简介

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;
}
说说我的看法
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号